如何解决截断宽度为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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。