前言

在我们开发一些文字较多的页面时，往往需要对文字做一些特殊处理，比如文本环绕，亦或者文本溢出等。接下就让我带大家加看看具体是怎么实现的把。

文本布局

对文本进行相应的布局处理，使其达到我们相要的排版。

文本环绕

可以通过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！！！

CSS布局（四）之文本布局

前言

文本布局

文本环绕

文本溢出

单行文本溢出

多行文本溢出