Question

我有五个带有文字的容器：

＆＃13;

.text {
  width: auto;
  height: auto;
  max-width: 350px;
  word-break: break-word;
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 5px;
}

＆＃13;

<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>

＆＃13;

我的想法是，将文字浮动到达max-width: 350px之前。当它达到它时，它应该打破这些话。我想，我的第一个文字只包含两个单词会更短，因为它没有浮动到350px并且不需要打破单词，而我的最后一个容器应该用它来达到＆＃39 ; s文本长度为350px的最大宽度然后打破单词。我遇到的问题是，现在每个容器都有相同的宽度。怎么了？我也尝试使用min-width: 100px;，但它没有帮助。有什么想法吗？

Answer 1

您需要使用inline-block或inline-flex，

word-break:break-word也不存在，因此请使用word-break:break-all或word-wrap: break-bord

＆＃13;

.text {
  width: auto;
  height: auto;
  max-width: 350px;
  word-break: break-all;
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 5px;
  display: inline-flex
}

＆＃13;

<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>

＆＃13;

Answer 2

请尝试

.text {
    display: inline-flex;
    height: auto;
    max-width: 360px;
    word-break: break-word;
    padding: 5px;
    border: 1px solid black;
    margin-bottom: 5px;
}

将min-width float设置为max-width和word-break文本

2 个答案: