为什么内联块元素扩展超过其内容？

Question

看看这里：http://dabblet.com/gist/8d85e0e30b4d46e14654。

为什么span元素会像两个单词在同一行上那样展开？ 有没有办法防止这种情况，并将其包装到内容大小给出的最小宽度？

修改
使用'white-space：nowrap;`不能解决问题 我试图使跨度适合文本，而不是文本适合跨度 这就是父div具有固定宽度的原因。

这是截图

谢谢。

Answer 1

请尝试以下操作： LINK

span
{
    display:inline-block;
    background:#333333;
    color:#FFFFFF;
    white-space: nowrap;
    overflow: hidden;    
}
div
{
    width:80px;
}

Answer 2

使用

white-space: nowrap;

为跨度。

尝试使用white-space: pre-line;。它会在代码中出现换行符的地方创建换行符，但忽略额外的空格（制表符和空格等）。

还要减小div的宽度。

link：http://jsfiddle.net/29nrr/

Answer 3

CSS：

span
{
    display:inline-block;
    background:#333333;
    color:#FFFFFF;
        white-space: nowrap;
}
div
{
    width:80px;
}

Answer 4

这是因为这个词没有足够的空间来填充它。如果输入完全合适的单词，它将不会给出任何空格。好的，我会来回答部分。我要强迫这个词在那个地方展示，然后转到下一行。怎么样？使用css属性word-break:break-all。

 span
 {
  display:inline-block;
  background:#333333;
  color:#FFFFFF;
  word-break:break-all;
 }