在伸缩项目中打断长字 [英] Break long words inside flex item
本文介绍了在伸缩项目中打断长字的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在"div2"中打断长字,div2和div3的宽度都不能大于父级宽度(即150px).唯一有效的是word-break: break-all
,但这也会打断简短的单词.
I would like to break long words inside "div2", both div2 and div3 width cannot be greater than parent width (i.e 150px). The only thing that works is word-break: break-all
but this will break short words as well.
#div1{
display: flex;
max-width: 150px;
height: 100px;;
}
#div2{
background-color: gray;
}
#div3{
background-color: rgb(197, 181, 181);
}
#div4{
width: 150px;
background-color: rgb(144, 199, 172);
}
<div id="div1">
<div id="div2">aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div id="div3">oooo</div>
</div>
<div id="div4">150 px - max width</div>
推荐答案
您可以使用break-word
仅断词
#div1 {
display: flex;
max-width: 150px;
height: 100px;
;
}
#div2 {
background-color: gray;
word-break: break-word;
}
#div3 {
background-color: rgb(197, 181, 181);
}
#div4 {
width: 150px;
background-color: rgb(144, 199, 172);
}
<div id="div1">
<div id="div2">aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div id="div3">oooo</div>
</div>
<div id="div4">150 px - max width</div>
和break-all
在任意给定点断裂
#div1 {
display: flex;
max-width: 150px;
height: 100px;
;
}
#div2 {
background-color: gray;
word-break: break-all;
}
#div3 {
background-color: rgb(197, 181, 181);
}
#div4 {
width: 150px;
background-color: rgb(144, 199, 172);
}
<div id="div1">
<div id="div2">aaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div id="div3">oooo</div>
</div>
<div id="div4">150 px - max width</div>
有关更多信息,请参见 MDN .
More info available on MDN.
希望这会有所帮助:)
这篇关于在伸缩项目中打断长字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文