标签搜索

目 录CONTENT

文章目录

css溢出隐藏的几种方法实现

沙漠渔溏 / 2024-03-01 15:27:05 / 共计2,557 字
温馨提示:
本文最后更新于 2024-03-01,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

文本溢出

当容器中的文本内容超出容器的宽度或高度时,就会出现文本溢出的情况。下面介绍几种CSS实现文本溢出的方法。

单行文本溢出省略

单行文本溢出省略通常用于标题等文本显示,可以通过设置white-space和text-overflow属性实现。white-space属性:用来设置元素中的空白如何处理,默认值为normal,即会自动忽略多余的空格和换行符。当设为nowrap时,文本不会换行。

text-overflow属性:用来控制溢出文本的显示方式,默认值为clip,即将溢出部分截去。当设置为ellipsis时,会显示省略号。

代码示例:

<style>
  .overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
<div class="overflow">这是一段需要溢出省略的文本内容</div>

多行文本溢出省略

多行文本溢出省略也可以通过设置text-overflow属性来实现。但是,text-overflow属性对于多行文本是不起作用的,需要结合其他属性来实现。

-webkit-line-clamp属性:用来限制显示的行数。

display属性:用来设置容器的display属性为-webkit-box,使其变成一个块级盒子。

-webkit-box-orient属性:用来设置块级盒子的排列方向为垂直方向。

代码示例:

<style>
  .overflow {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
  }
</style>
<div class="overflow">这是一段需要溢出省略的多行文本内容,如果文本过长会出现省略号</div>

多行省略

多行省略主要是用来实现在固定高度的容器中,将超出容器高度的文本省略掉。同样,对于单行文本省略,可以使用text-overflow属性,但对于多行省略,则需要结合其他属性来实现。

使用纯文本实现

通过调整行高和高度来实现多行文本省略。

代码示例:

<style>
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 25px;
    height: 50px;
  }
</style>
<div class="ellipsis">这是一段需要省略的多行文本内容,如果文本过长会出现省略号</div>

使用伪元素实现

通过伪元素在文本后面添加省略号来实现多行文本省略。

代码示例:

<style>
  .ellipsis::before {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 10px;
    background: white;
  }
  .ellipsis {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 25px;
    height: 50px;
  }
</style>
<div class="ellipsis">这是一段需要省略的多行文本内容,如果文本过长会出现省略号</div>

到此这篇关于css溢出隐藏的几种方法实现的文章就介绍到这了,更多相关css溢出隐藏内容请搜索 『沙漠渔溏』 以前的文章或继续浏览下面的相关文章,希望大家以后多多支持 『沙漠渔溏』 !