本文介绍: 以上就是CSS实现文本溢出多行省略方法,对于不同需求可以根据实际情况选择不同实现方式。在实际开发中,我们需要根据不同浏览器兼容性来使用相应的CSS前缀以及注意不同属性之间兼容性。

CSS中的文本溢出多行省略是在布局设计中经常会遇到问题。本文将介绍CSS的文本溢出多行省略实现方法

目录

一、文本溢出

1.1、单行文本溢出省略:

1.2、多行文本溢出省略:

二、多行省略

2.1、使用纯文本实现

2.2、使用伪元素实现

总结


一、文本溢出

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

1.1、单行文本溢出省略

单行文本溢出省略通常用于标题等文本显示可以通过设置whitespacetextoverflow属性实现。

whitespace属性用来设置元素中的空白如何处理默认值normal,即会自动忽略多余的空格换行符。当设为nowrap时,文本不会换行

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

示例代码

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

1.2、多行文本溢出省略:

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

webkitlineclamp属性:用来限制显示行数

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

webkit-boxorient属性:用来设置块级盒子排列方向垂直方向

示例代码

<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属性,但对于多行省略,则需要结合其他属性来实现。

2.1、使用纯文本实现

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

示例代码:

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

2.2、使用伪元素实现

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

示例代码:

<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前缀以及注意不同属性之间的兼容性。

原文地址:https://blog.csdn.net/m0_72196169/article/details/132707080

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_31022.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注