強制所有行的HTML內容（具有嵌入的元件）來填充容器

的寬度我有一塊HTML內容的如：強制所有行的HTML內容（具有嵌入的元件）來填充容器

<span class="wrappable"><i>(03/10/2016) Author Name</i> LongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreakLongContentWithoutLineBreak</span>

的「可纏繞」的CSS類被定義爲：

.wrappable 
{ 
    overflow-wrap: break-word !important; 
    word-wrap: break-word !important; 
    white-space: normal !important; 
    display: inline !important; 
}

請參閱https://jsfiddle.net/dn9tt26e/運行小提琴。

至少在Firefox 45.0.1版本中，這會產生一個輸出，該輸出在第一行中斷開而不會填充行的寬度。對於純文本內容，不存在這樣的問題，但只要添加嵌入式HTML元素，似乎就會出現問題。

如何確保所有生產線（可能是最後一個生產線）填滿容器的整個寬度而不會過早斷裂？

什麼，我在我的瀏覽器中看到的一些圖片：用破字

建議解決方案：在Firefox
本地網頁在我的機器上：在Firefox所有https://jsfiddle.net/4bu8ctt4/
IE 11中的本地頁面（此頁面根本沒有包裝第二行）

來源

2016-03-25 prmph

對不起，如果我誤解你，但也許這可以幫助？

添加屬性類

word-wrap: break-word;

這樣

.wrappable 
{ 
    overflow-wrap: break-word !important; 
    word-wrap: break-word !important; 
    white-space: normal !important; 
    display: inline !important; 
    word-wrap: break-word; 
}

來源： http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

來源

2016-03-25 00:06:51 VonHornmeister

但這條規則已經在我的風格。你有沒有看到這樣的一句話：單詞包裝：掰掰！？ – prmph

你需要 *作者姓名*與這個長文本在同一行嗎？ – VonHornmeister

是的，但如果*作者姓名*在一行的結尾，我沒有問題包裝隨後的內容。基本上我不關心內容包裝的內容在哪裏，只要它的所有行只有在它們已經填充了容器的寬度時才包裝。 – prmph

你已經基本上2個字與斷字的組合，這意味着它會把新行中的任何長字。試用word-break: break-all; https://jsfiddle.net/4bu8ctt4/

來源

2016-03-25 00:08:32

這似乎不起作用。看到編輯的問題，我看到的圖像 – prmph

http://caniuse.com/#feat=wordwrap 似乎firefox和Edge現在不完全支持文字包裝。你必須找到解決方法 –

強制所有行的HTML內容（具有嵌入的元件）來填充容器

回答

相關問題