css 如何防止FlexBox水平扩展

lc8prwob 于 2023-03-24 发布在其他

关注(0)|答案(2)|浏览(98)

我已经在网络上，尝试了许多解决方案，没有一个工作。我有一个容器，将容纳几行（像数据网格）。行定义如下：

.container{
  width: 500px;
  height: 300px;
  border: 2px solid 
}
.row{
  width: 100%;
  height: 48px;
  background-color: dodgerblue;
  display: flex;  
  align-items:center;
}
.row-left{
  width: 60px;
  display: flex;  
  height: 100%;
  background-color: red;
}
.row-middle{
  flex:1 0 0;  
  background-color: green;
}
.row-right{
  width: 100px;
  height: 100%;
  background-color: yellow;
}
.subject{
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="container">
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I am supposed to look like.
      </div>
    </div>
    <div class="row-right">X</div>
  </div>
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I look like when my text is too long.  How can we possibly fix this to hide the overflow and ellipses the text?
      </div>
    </div>
    <div class="row-right">X</div>
  </div>  
</div>

我需要将row-middle保持为静态大小，并使用省略号处理文本溢出。

css

来源：https://stackoverflow.com/questions/75816006/how-to-keep-a-flexbox-from-expanding-horizontally

2条答案

按热度按时间

yjghlzjz1#

您可以使用-webkit-line-clamp属性

.container{
  width: 500px;
  height: 300px;
  border: 2px solid 
}
.row{
  width: 100%;
  height: 48px;
  background-color: dodgerblue;
  display: flex;  
  align-items:center;
}
.row-left{
  width: 60px;
  display: flex;  
  height: 100%;
  background-color: red;
}
.row-middle{
  flex:1 0 0;  
  background-color: green;
}
.row-right{
  width: 100px;
  height: 100%;
  background-color: yellow;
}
.subject{
  width: 100%;
  height: 100%;
   display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

<div class="container">
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I am supposed to look like.
      </div>
    </div>
    <div class="row-right">X</div>
  </div>
  <div class="row">
    <div class="row-left">X</div>
    <div class="row-middle">
      <div class="subject">
      This is what I look like when my text is too long.  How can we possibly fix this to hide the overflow and ellipses the text?
      </div>
    </div>
    <div class="row-right">X</div>
  </div>  
</div>

您可以通过here阅读更多信息
请检查浏览器compatibility

赞(0）回复(0）举报 2023-03-24

4nkexdtk2#

flex项的最小宽度默认为其内容的宽度。由于文本位于元素内部，这就解释了为什么长文本会超出布局。
解决这个问题的一种方法是给予flex项一个min-width: 0样式。

.row-middle{
  …
  min-width: 0;
}

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-24

我来回答

css 如何防止FlexBox水平扩展

2条答案

相关问题

热门标签

最新问答