一、CSS文字超出换行显示
当一段文字的长度超过了其父元素的宽度，通常情况下会自动换行。但有时候我们需要让文字把它的容器撑满，而不会自动换行，这时需要使用下面的CSS属性：
word-wrap: break-word;
这个属性使得长单词或URL在必要的时候可以自动换行，而不会出现在容器之外。
举个例子：
<div style="width: 110px; border: 1px solid black; padding: 5px;">
<p style="word-wrap: break-word;">这是一段超长的单词：supercalifragilisticexpialidocious
</div>
可以看到这个例子的&P标签中包含了不可能完全显示在容器内的长单词。当设置了word-wrap：break-word；属性之后，单词会在必要的时候被划分为多行，并显示完整内容。
二、CSS文字不显示省略号
有时候我们需要让一个容器内的文字保持在一行内且不显示溢出部分，这时可以使用下面的CSS属性：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
这些属性将强制把一个元素内的文本限制在一行，并将超出部分截断并用省略号来表示。这个属性最常用于制作产品列表和新闻标题等。
举个例子：
<div style="width: 100px; border: 1px solid black; padding: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
<p>This is a very long text that needs to be truncated
</div>
可以看到这个例子中的&P标签内包含文字，在这个元素内，将超出部分隐藏，并在末尾添加省略号。
三、CSS使文字不换行
设置CSS使文字不换行非常简单，只需要添加以下的CSS属性：
white-space: nowrap;
这个属性将文本的换行位置设置为未知，因此元素内的文本会一直在一行内显示，即使它超出了容器的宽度。
举个例子：
<div style="width: 100px; border: 1px solid black; padding: 5px; white-space: nowrap;">
<p>This is a very long text that should not wrap
</div>
可以看到这个例子中的&P标签内包含超出容器宽度的文字，但是由于我们使用了white-space：nowrap；属性，所以文字会一直在同一行内显示。
四、CSS文字超出不换行
“不换行”和“超出不换行”之间的区别在于标准的不换行属性会自动的缩放超出容器的文本大小。如果我们不想要自动缩放文本，可以使用“超出不换行”的属性。
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
这些属性将文本的大小限制在元素内部，并用省略号来取代超出部分。
举个例子：
<div style="width: 100px; border: 1px solid black; padding: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<p>This is a very long text that should not wrap and should be truncated
</div>
可以看到这个例子中的&P标签内包含文字，在这个元素内，将超出部分隐藏，并在末尾添加省略号。
五、CSS不换行属性
使用“white-space:no-wrap”属性可以防止文本自动在不适当的位置折行。
举个例子：
<div style="border: 1px solid #000;float: left;width: 300px;white-space:nowrap;">
<p>No wrap该字符串不会被自动折行，不换行，而是在同一行中继续向右延伸，直到达到父容器的右边界。
</div>
可以看到这个例子中的&P标签内包含字符串，在这个元素内，该字符串不会被自动折行，而是在同一行中继续向右延伸，直到达到父容器的右边界。
六、CSS设置不换行
使用“white-space:no-wrap”属性可以防止文本自动在不适当的位置折行。
举个例子：
<div style="border: 1px solid #000;float: left;width: 300px;white-space:nowrap;">
<p>No wrap该字符串不会被自动折行，不换行，而是在同一行中继续向右延伸，直到达到父容器的右边界。
</div>
可以看到这个例子中的&P标签内包含字符串，在这个元素内，该字符串不会被自动折行，而是在同一行中继续向右延伸，直到达到父容器的右边界。
七、CSS段落中文本不换行
如果需要在段落中插入代码，需要保持该代码不换行，可以使用以下的CSS属性：
white-space: pre;
这个属性将使文本保持原有的格式，意味着空格和换行符也会被保留。
举个例子：
<div class="code" style="white-space: pre; font-family: monospace">
<code>
function foo() {
return 'bar';
}
</code>
</div>
在这个例子中，我们将一个代码块插入到了一个div中，然后使用“white-space:pre”属性来保持代码不换行并且保留空格和换行符。
八、CSS强制不换行
我们可以使用这些属性强制不换行：
word-break: keep-all; white-space: nowrap;
这些属性强制浏览器不换行文本，且不允许单词在某个允许的分隔符之间分割。这个属性适用于像中文这样不使用空格来分隔单词的语言。
举个例子：
<p style="word-break: keep-all;white-space: nowrap;">这是一个中文页面，不应该使用空格来分隔单词。
在上面的例子中，整个Div中的文字都在同一行内显示, 不换行。
