根据文本长度改变框高度

我想将不同长度的文本内容包装在一个框中。使用下面的代码，对于较小长度的文本，会调整该框的宽度。但高度不变，文字不包裹在框内。根据文本长度改变框高度

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

来源

2017-01-23 coder231

删除'白色空间：nowrap'。 –

试试这个

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

你不需要height:auto和word-wrap，其创造的问题。我将padding更改为与border-radius兼容。

来源

2017-01-23 08:15:12 Massimo

只是下面的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; 

}

来源

2017-01-23 07:54:00

由于在OP代码中没有这么长的单词，因此不需要'word-wrap'属性。 –

是的，他实际上只需要删除白色空间：nowrap;从他的CSS –

只是删除white-space: nowrap是这样工作的。

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

来源

2017-01-23 07:58:13

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

来源

2017-01-23 08:38:20

根据文本长度改变框高度

回答

相关问题