Question

我想在一个框中包含不同长度文本的内容。使用下面的代码，框的宽度可以调整为较小的文本长度。但是高度没有变化，文字没有包裹在盒子里面。

.chatbox {
  border: 1px solid black;
  border-radius: 3.5em/5em;
  padding: 2%;
  max-width: 60%;
  float: left;
  height: auto;
  white-space: nowrap;
}

<div class="chatbox">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo arcu, aliquet quis interdum sed, molestie iaculis turpis. Morbi rutrum molestie mauris id gravida. Curabitur libero tortor, tincidunt at facilisis vitae, euismod id urna. Proin sit amet
  facilisis est. Vivamus id rutrum eros, in tempus mauris. Nunc nec velit tempus, varius neque sit amet, varius mi. Nullam ullamcorper lacus arcu, eu commodo magna consectetur sit amet.
</div>

Answer 1

试试这个

 .chatbox{
    border:1px solid black;
    border-radius:3.5em/5em;
    padding:2em;
    max-width:60%;
    float:left;
 }

您不需要height:auto和word-wrap，这会产生问题。我将padding更改为与border-radius兼容。

Answer 2

将white-space:nowrap更改为white-space:normal，希望这会对您有所帮助

＆＃13;

.chatbox {
  border: 1px solid black;
  border-radius: 3.5em/5em;
  padding: 2%;
  max-width: 60%;
  float: left;
  height: auto;
  white-space: normal;
}

＆＃13;

<div class="chatbox">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo arcu, aliquet quis interdum sed, molestie iaculis turpis. Morbi rutrum molestie mauris id gravida. Curabitur libero tortor, tincidunt at facilisis vitae, euismod id urna. Proin sit amet
  facilisis est. Vivamus id rutrum eros, in tempus mauris. Nunc nec velit tempus, varius neque sit amet, varius mi. Nullam ullamcorper lacus arcu, eu commodo magna consectetur sit amet.
</div>

＆＃13;

Answer 3

用下面的css替换你的css：

.chatbox{
    border:1px solid black;
    border-radius:3.5em/5em;
    padding:2%;
    max-width:60%;
    float:left;
    height:auto;

    word-wrap: break-word;

}

Answer 4

只需删除white-space: nowrap即可。

 .chatbox{
        border:1px solid black;
        border-radius:3.5em/5em;
        padding:2%;
        max-width:60%;
        height:auto;
        float: left;
    }

根据文本长度改变盒子高度

4 个答案: