根據文本長度改變框高度

我想將不同長度的文本內容包裝在一個框中。使用下面的代碼，對於較小長度的文本，會調整該框的寬度。但高度不變，文字不包裹在框內。根據文本長度改變框高度

.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

根據文本長度改變框高度

回答

相關問題