自动换行不考虑长非中断文本的父宽度
[英] Word-wrap doesn't respect parent's width for long non-break text
本文介绍了自动换行不考虑长非中断文本的父宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
.container {/*容器的宽度可以动态调整大小.我在例子中放了 width = 300px 来演示一个案例容器的宽度不能容纳第二个味精*/宽度:300px；显示:弹性；弹性方向:列；对齐项目:flex-start；填充:1em；背景颜色:蓝色；}.父母{显示:弹性；弹性方向:行；flex-wrap:nowrap;填充:1em；背景颜色:红色；box-sizing:border-box;底边距:1em；}.名称{背景色:迷雾色；宽度:70px；填充:1em；}.msg{背景颜色:粉蓝色；最大宽度:30vw；填充:.5em；自动换行:断字；}
<div class="parent"><div class="name">大卫
<div class="msg">你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?
<div class="parent"><div class="name">汉娜
<div class="msg">某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事
理想情况下，我希望每个 msg 的最大宽度为 30vw，但同时尊重父级的宽度.第一行 行为正确，但第二行 行为不正确.如果父的宽度被调整为小于 30vw 的某个值，second msg 将溢出.
我想要类似 max-width = min(30vw, parent's width)
注意:容器的宽度可以动态调整大小.我在示例中设置 width = 300px 来演示容器无法容纳第二个 msg 的情况，该 msg 不知何故具有宽度 = 最大宽度 = 30vw.
您还可以在http://jsfiddle.net/上查看示例vbj10x4k/231/
解决方案
只需将 max-width:100% 设置为 .parent 即可，这样就尊重 .parent 的宽度code>.container 然后依靠 flex 并且你的元素默认会缩小.另外不要忘记元素本身的 min-width:0 使元素能够缩小.
.container {宽度:300px；显示:弹性；弹性方向:列；对齐项目:flex-start；填充:1em；背景颜色:蓝色；}.父母{显示:弹性；弹性方向:行；flex-wrap:nowrap;填充:1em；背景颜色:红色；box-sizing:border-box;底边距:1em；最大宽度:100%；/*添加了这个*/}.名称{背景色:迷雾色；宽度:70px；填充:1em；}.msg{背景颜色:粉蓝色；最大宽度:30vw；最小宽度:0;/*添加了这个*/填充:.5em；自动换行:断字；}
<div class="parent"><div class="name">大卫
<div class="msg">你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?你好吗?
<div class="parent"><div class="name">汉娜
<div class="msg">某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事某事
.container {
/*
Container's width can be dynamically resized.
I put width = 300px in the example to demonstrate a case
where container's width couldn't hold second msg
*/
width: 300px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1em;
background-color: blue;
}
.parent{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
padding:1em;
background-color:red;
box-sizing:border-box;
margin-bottom: 1em;
}
.name{
background-color:mistyrose;
width: 70px;
padding: 1em;
}
.msg{
background-color:powderblue;
max-width: 30vw;
padding:.5em;
word-wrap:break-word;
}
<div class='container'>
<div class="parent">
<div class="name">
David
</div>
<div class="msg">
How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you?
</div>
</div>
<div class="parent">
<div class="name">
Hannah
</div>
<div class="msg">
somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
</div>
</div>
</div>
Ideally , I want each msg to have max-width of 30vw, but at the same time respect parent's width. The first row behaves correctly, but the second row doesn't. If parent's width is resized to some value smaller than 30vw, the second msg will overflow.
I want something like max-width = min(30vw, parent's width)
NOTE: Container's width can be dynamically resized. I put width = 300px in the example to demonstrate a case where container cannot hold the second msg which somehow has width = it's max-width = 30vw.
You can also see the example at http://jsfiddle.net/vbj10x4k/231/
解决方案
Simply set max-width:100% to .parent so this one respect the width of .container then rely on flex and your element will shrink by default. Also don't forget min-width:0 on the element itself to enable the element to shrink.
.container {
width: 300px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1em;
background-color: blue;
}
.parent{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
padding:1em;
background-color:red;
box-sizing:border-box;
margin-bottom: 1em;
max-width:100%; /*Added this */
}
.name{
background-color:mistyrose;
width: 70px;
padding: 1em;
}
.msg{
background-color:powderblue;
max-width:30vw;
min-width:0; /*addedd this*/
padding:.5em;
word-wrap:break-word;
}
<div class='container'>
<div class="parent">
<div class="name">
David
</div>
<div class="msg">
How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you?
</div>
</div>
<div class="parent">
<div class="name">
Hannah
</div>
<div class="msg">
somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
</div>
</div>
</div>
这篇关于自动换行不考虑长非中断文本的父宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
