CSS 一段文本怎么设置超过省略号显示

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS 一段文本怎么设置超过省略号显示相关的知识,希望对你有一定的参考价值。

参考技术A 样式控制也可以实现的,偏方
首先这个多行是高度宽度固定的,比如高度是100;宽度200
<div
style="width:100px;
height:200px;overflow:hidden;line-height:25px;position:relative">
这里是内容内容这里是内容内容这里是内容内容这里是内容内容
<div
style="position:absolute;
bottom:0;right:0;
height:25px;
width:25px;background:#fff">……</div>
</div>
这个方法是隐藏了多余的文字,实际上文字不会少,只是给用户看到的迹象是多的用省略号代替了,这样的好处是利用seo,坏处是当文字不够多的话,那就露馅了
参考技术B 首先你容纳文字的容器要设置固定的宽高,然后加上以下属性
white-space:
nowrap;
word-break:
keep-all;
text-overflow:
ellipsis;
第一行的代码,是不允许文字换行
第二行的代码,是不允许把单词拆开
第三行的代码,就是文本超出容器,以省略号显示
望采纳!

CSS中 设置( 单行多行 )超出显示省略号

1. 设置超出显示省略号

css设置超出显示省略号可分两种情况:

  • 单行文本溢出显示省略号…
  • 多行文本溢出显示省略号…

但使用的核心代码是一样的:需要先使用 “overflow:hidden;” 来把超出的部分隐藏,然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。

  • overflow:hidden; 不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
  • text-overflow:ellipsis; 当文本对象溢出是显示…,当然也可是设置属性为 clip 不显示点点点;

单行文本溢出显示省略号

<div class="wrap">
  <div class="content">测试数据:css单行文本超出长度显示省略号--明天也要努力</div>
  <div class="content text-ellipsis">测试数据:css单行文本超出长度显示省略号--明天也要努力</div>
</div>

<style>
.wrap
  width: 200px;
  height: 200px;

.content
  width: 100%;
  margin-top: 6px;

.text-ellipsis
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;

</style>

多行文本溢出显示省略号

思路:
1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数;
3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本

<div class="wrap">
  <div class="content">
    测试数据:css多行文本超出长度显示省略号,多行文本超出长度显示省略号--明天也要努力
  </div>
  <hr>
  <div class="content text-ellipsis">
    测试数据:css多行文本超出长度显示省略号,多行文本超出长度显示省略号--明天也要努力
  </div>
</div>

<style>
.wrap
  width: 200px;
  height: 300px;

.content
  width: 100%;

.text-ellipsis
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;

</style>

说明: 移动端浏览器绝大部分是 WebKit 内核的,所以该方法适用于移动端;

  • -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中;
  • display: -webkit-box 将对象作为弹性伸缩盒子模型显示 ;
  • -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 ;

2. 关于 -webkit-line-clamp 属性拓展

-webkit-line-clamp 可以把块容器中的内容限制为指定的行数,它只有在 display 属性设置成 -webkit-box 或 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical 时才有效果。
在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号 (ellipsis )。
当他应用于锚 (anchor) 元素时,截取动作可以发生在文本中间,而不必在末尾。
备注: 此属性在 WebKit 中已经实现,但有一些问题。他是旧标准的一种支持。CSS Overflow Module Level 3 规范还定义了一个 line-clamp 属性,用来代替此属性且避免一些问题。

语法:

/* Keyword value */
-webkit-line-clamp: none;

/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;

none:这个值表明内容显示不会被限制。
integer:这个值表明内容显示了多少行之后会被限制。必须大于 0.

以上是关于CSS 一段文本怎么设置超过省略号显示的主要内容,如果未能解决你的问题,请参考以下文章

CSS设置超过两行或者单行显示...

css设置文本超过宽度后显示省略号点点点#yyds干货盘点#

css设置超过固定长度以省略号显示

CSS 多行文本省略(兼容IE)

如何设置CSS样式使网页中过长的新闻标题后面以省略号显示

CSS中 设置( 单行多行 )超出显示省略号