CSS布局(四)之文本布局

·  阅读 93
CSS布局(四)之文本布局

「这是我参与11月更文挑战的第九天,活动详情查看:2021最后一次更文挑战」。

往期推荐:

CSS布局之全屏布局

CSS布局(二)之多列布局

CSS布局(三)之等分布局

前言

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

文本布局

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

文本环绕

可以通过float来实现,达到文本环绕的效果。

image.png

<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;
  }
}
复制代码

文本溢出

文本溢出也算是我们经常会遇到的一种文本布局,一般分为单行文本溢出和多行文本溢出。

image.png

<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!!!

分类:
前端
标签:
分类:
前端
标签: