html - 对于长的不间断文本,自动换行不尊重父母的宽度
问题描述
.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>
理想情况下,我希望每个msg
人的最大宽度为30vw
,但同时尊重父母的宽度。第一行行为正确,但第二行没有。如果 parent 的宽度调整为小于 30vw 的某个值,则第二个msg 将溢出。
我想要类似的东西max-width = min(30vw, parent's width)
注意:容器的宽度可以动态调整大小。我在示例中放置了 width = 300px 以演示容器无法容纳第二个 msg 的情况,该 msg 以某种方式具有 width = 它的 max-width = 30vw。
解决方案
简单地设置max-width:100%
为.parent
这样一个尊重.container
然后依赖 flex 的宽度,默认情况下你的元素会缩小。也不要忘记min-width:0
元素本身以使元素缩小。
.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>
推荐阅读
- javascript - React Native Jest SyntaxError: Duplicate __self prop found
- bash - bash:不要从脚本中提示 select case 语句 - 可能吗?
- javascript - 如何根据另一个请求的响应向 API 发出请求?不能在回调中调用 React Hook “useSwr”
- reactjs - 使用 TypeScript 将具有多个参数的函数传递给子组件
- python - 从循环中命名数据帧
- php - 在 WooCommerce 电子邮件通知上显示自定义产品图像
- apache - 使用 .htaccess 去除链接地址中的 id 号
- spring - 属性 modelAttribute 根据 TLD 对标签形式无效
- hive - 地图列表作为自定义 Hive UD 的 inout
- unicode - u+00d0 和 u+0110 有什么区别?