根据内部文本长度改变框高度

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，希望对您有所帮助

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

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