强制所有行HTML内容（带嵌入元素）填充容器的宽度

Question

我有一段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元素，似乎就会出现问题。

如何确保所有线条（可能是最后一条线条）填满容器的整个宽度而不会过早断裂？

我在浏览器中看到的一些照片：

1. 使用break-word建议的解决方案：Firefox中的所有https://jsfiddle.net/4bu8ctt4/：

2. Firefox中我机器上的本地页面：

3. IE 11中的本地页面（这个根本没有包装第二行）

Answer 1

你基本上有2个单词与break-word相结合，这意味着它会在新行中添加任何长词。试试word-break: break-all; https://jsfiddle.net/4bu8ctt4/

Answer 2

对不起，如果我误解了你，但也许这有帮助吗？

为您的班级添加属性

 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