如何强制我的文本不要在 CSS 中分行？答案

【问题标题】：How to force my text to not break into lines in css?如何强制我的文本不要在 CSS 中分行？
【发布时间】：2014-04-23 06:30:35
【问题描述】：

我在另一个固定宽度的 div 中有一个 div。我希望内部 div 可以水平增长，直到 in 可以在一行中包含它的所有元素或文本。创建水平滚动条并不重要。我该怎么办？这是我的示例代码：

<div style="width:400px;border:solid 1px red;">
    TEST TEXT
    <div style="border:solid 3px green;position:absolute;z-index:99;text-overflow:">
        TEST INSIDE TEST INSIDE TEST INSIDE TEST INSIDE TEST INSIDE
        TEST INSIDE TEST INSIDE TEST INSIDE TEST INSIDE TEST INSIDE
    </div>
</div>

【问题讨论】：

white-space:nowrap; - jsfiddle.net/uYKKy

标签： html css autogrow

【解决方案1】：

使用white-space: nowrap; 使文本不会在空白处中断

【讨论】：

【解决方案2】：

我将在 text-overflow 的 css 中添加选项：省略号；有溢出：隐藏；和空白：nowrap;

如果你这样使用它：

h1{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

你会得到很好的修剪来溢出文本。

LIVE EXAMPLE

protip about triminng for text

【讨论】：

【解决方案3】：

这是你想要指出的吗？试试看 JSfiddle code http://jsfiddle.net/uYKKy/1/

【讨论】：

不是我的答案，而是好点！我想要整页滚动。但我喜欢你推荐我将来使用的东西:)