我有五个带有一些文本的容器:
.text {
width: auto;
height: auto;
max-width: 350px;
word-break: break-word;
padding: 5px;
border: 1px solid black;
margin-bottom: 5px;
}
<div class="text">
Some text!
</div>
<div class="text">
Some longer text!
</div>
<div class="text">
Some longer long loooonger text!
</div>
<div class="text">
Some longer longer very longer very very veeeery looonger text!
</div>
我的想法是,让文本 float 直到达到我的max-width: 350px
。到时应断言。我想,我的第一个文本,只包含两个单词会更短,因为它直到 350px 才 float 并且不需要打断单词,而我的最后一个容器应该达到它的文本长度最大宽度350px 然后打断字。我遇到的问题是,现在每个容器都具有相同的宽度。怎么了?我也尝试使用 min-width: 100px;
但它没有帮助。有什么想法吗?
最佳答案
您需要使用inline-block
或inline-flex
,
此外,word-break: break-word
是 deprecated , 所以使用 word-break:break-all
或 word-wrap: break-word
.text {
width: auto;
height: auto;
max-width: 350px;
word-break: break-all;
padding: 5px;
border: 1px solid black;
margin-bottom: 5px;
display: inline-flex
}
<div class="text">
Some text!
</div>
<div class="text">
Some longer text!
</div>
<div class="text">
Some longer long loooonger text!
</div>
<div class="text">
Some longer longer very longer very very veeeery looonger text!
</div>
关于html - 设置 min-width float until max-width 和分词文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43657165/