截断宽度为100％的文本

问题描述

我有HTML

.container {
      display: flex;
      width: 100%;
    }
    
.first {
  width: 40px;
  border: 1px solid red;
}

.second {
  border: 1px solid blue;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  width: 0;
}

.second div {
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: Nowrap;
  width: 100%;
}

<div class="container">
  <div class="first">123</div>
  <div class="second">
    <h3>Header</h3>
    <div>A very long text A very long text A very long text A very long text A very long text A very long text A very long text A very long text A very long text A very long text A very long text A very long text </div>
  </div>
</div>

这里的主要问题是.SECOND div的大小变大并且不会截断文本

您可以在这里看到它

https://jsbin.com/sesamayuji/edit?html,output 如果我将.second div的宽度设置为300px，它将可以工作，但是我需要100％

解决方法

.second {width: 0;}

这就是答案

,

请尝试使用此代码。

我为您的课程div.second添加了一个container-2。因为在某个时候，您需要一个块来解决该限制。我首先使用calc()根据div。调整宽度。

.container-2{
  width: calc(100% - 40px);
}

我只用了Bootstrap制作的flexbox方法。

.second {
  border: 1px solid blue;  
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.second div,.second h3{
  position: relative;
  width: 100%;
  min-height: 1px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.container {
  display: flex;
  width: 100%;
}
.container-2{
  width: calc(100% - 40px);
}
    
.first {
  width: 40px;
  border: 1px solid red;
}

.second {
  border: 1px solid blue;
  /*flex: 1;
  flex-direction: column;
  align-items: flex-start;
  width: 0;*/
  
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.second div,.second h3{
  position: relative;
  width: 100%;
  min-height: 1px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}
.second div {
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

<div class="container">
  <div class="first">123</div>
  <div class="container-2">
    <div class="second">
      <h3>Header</h3>
      <div>A very long text A very long text A very long text A very long text A very long text A very long text A very long text A very long text A very long text A very long text A very long text A very long text </div>
    </div>
  </div>
</div>