Question

在具有span且固定宽度的display: inline-block内插入带有空格的文字时，会在每个空格字符上创建一个新行。

我需要固定宽度来限制长文本，并最终将这些文本中的一对水平放置。新的线虫阻止我这样做。

用于演示奇怪行为的HTML：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .style
        {
            display: inline-block;
            width: 30px;
            border: 1px solid red;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div>
        <span class="style">Long Text With spaces</span>
    </div>
    <div>
        <span class="style">LongTextWithoutSpaces</span>
    </div>
</body>

Answer 1

您需要在CSS中添加white-space: nowrap;。

Answer 2

所以你不想要文本换行？

DEMO

.style {
    display: inline-block;
    width: 30px;
    border: 1px solid red;
    overflow:hidden;

    white-space: nowrap; /* add this */
}

Answer 3

我不能100％确定你所追求的是什么，因为这种行为对我来说似乎并不奇怪。但我怀疑你想要的是word-break:break-all。现场演示http://jsfiddle.net/sitrobotsit/9z3hp/

具有固定宽度的内联块内部空间的文本创建新行

3 个答案: