正常文本的显示
<style>
p{
width: 300px;
box-shadow: 0 0 10px #ccc;
padding: 0 20px;
margin: 20px 100px;
}
</style>
<p>手指轻轻敲打着键盘,一句句,一行行,一段段,敲得都是些牵挂,都是些痴缠,是不是因为封存在心底的那抹温柔,还没泯灭,才会一次次敲下这些落寞的字迹。</p>
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180605141733841-1772124325.png)
强制不换行
<style>
p{
width: 300px;
box-shadow: 0 0 10px #ccc;
padding: 0 20px;
margin: 20px 100px;
white-space: nowrap;
}
</style>
<p>手指轻轻敲打着键盘,一句句,一行行,一段段,敲得都是些牵挂,都是些痴缠,是不是因为封存在心底的那抹温柔,还没泯灭,才会一次次敲下这些落寞的字迹。</p>
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180605141820341-35598164.png)
溢出隐藏 并用省略号表示
<style>
p{
width: 300px;
box-shadow: 0 0 10px #ccc;
padding: 0 20px;
margin: 20px 100px;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 溢出内容由省略号表示 */
}
</style>
<p>手指轻轻敲打着键盘,一句句,一行行,一段段,敲得都是些牵挂,都是些痴缠,是不是因为封存在心底的那抹温柔,还没泯灭,才会一次次敲下这些落寞的字迹。</p>
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180605141836914-201935217.png)
设置文本行数 溢出隐藏
<style>
p{
width: 300px;
box-shadow: 0 0 10px #ccc;
padding: 0 20px;
margin: 20px 100px;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3; /* 指定行数*/
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
<p>手指轻轻敲打着键盘,一句句,一行行,一段段,敲得都是些牵挂,都是些痴缠,是不是因为封存在心底的那抹温柔,还没泯灭,才会一次次敲下这些落寞的字迹。</p>
![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180605142123805-965819788.png)