往期推荐：
「CSS布局之全屏布局」
「CSS布局（二）之多列布局」
「CSS布局（三）之等分布局」
前言
在我们开发一些文字较多的页面时，往往需要对文字做一些特殊处理，比如文本环绕，亦或者文本溢出等。接下就让我带大家加看看具体是怎么实现的把。
文本布局
对文本进行相应的布局处理，使其达到我们相要的排版。
文本环绕
可以通过 float 来实现，达到文本环绕的效果。
<div class="layout"> <img src="https://w.wallhaven.cc/full/pk/wallhaven-pkgk6j.jpg" />人生匆匆，光阴易逝，但青春却能永葆。 青春其实就是一颗永远强劲搏动流量充沛的心。年轻英俊，皮肤细嫩，嘴唇红润只是青春的外表，不是青春的实质。青春的实质是坚韧顽强的意志、充沛饱满的感情、丰富高远的想象力和旺盛喷涌清澈常新的生命之泉。</div>
复制代码
.layout { width: 414px; height: 736px; overflow: hidden; font-size: 20px; color: gray; word-break: break-all; // 在单词内换行 img { float: left; width: 250px; height: 150px; margin-right: 20px; }}
复制代码
文本溢出
文本溢出也算是我们经常会遇到的一种文本布局，一般分为单行文本溢出和多行文本溢出。
<div class="layout"> <p class="s-ellipsis"> 人生匆匆，光阴易逝，但青春却能永葆。 </p> <p class="m-ellipsis"> 青春其实就是一颗永远强劲搏动流量充沛的心。年轻英俊，皮肤细嫩，嘴唇红润只是青春的外表，不是青春的实质。青春的实质是坚韧顽强的意志、充沛饱满的感情、丰富高远的想象力和旺盛喷涌清澈常新的生命之泉。 </p></div>
复制代码
.layout { margin: 20px; width: 314px; height: 736px;
p { line-height: 30px; font-size: 20px; text-align: justify;
}}
复制代码
单行文本溢出
单行 文本溢出相对简单。通过 overflow 和 text-overflow 即可实现。
.s-ellipsis { color: green; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
复制代码
多行文本溢出
多行文本相对麻烦一点，通过 max-height 和 line-height 计算出想要显示的行数，再通：：after 和 position 把省略号定位在指定位置即可。
.m-ellipsis { color: orange; overflow: hidden; position: relative; max-height: 120px; line-height: 40px; &::after { position: absolute; right: 0; bottom: 0; padding-left: 20px; background: linear-gradient(to right, transparent, #eee 50%); content: "..."; }}
复制代码
注意：如果单行的话，也会出现省略号，这个时候就需要通过 js 来特殊处理了。
好，今天就到这里了，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！
评论