CSS文字溢出省略号，单行省略号，多行省略号

有些时候在文章列表的页面，文章标题只要显示固定宽度，那么我们就需要把多余的文字省略掉，这个时候就需要用省略号处理。

一、单行省略号设置

<style>
.text{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 150px;border:1px solid #ccc;padding:10px;
}
</style>
<div class="text">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>

一、多行省略号设置

<style>
.text{width: 200px;border:1px solid #ccc;word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2; /* 设置最多显示几行 */-webkit-box-orient: vertical;
}
</style>
<div class="text">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>

CSS文字溢出省略号，单行省略号，多行省略号相关推荐

css文字与省略号重叠,CSS 文字溢出处添加省略号(示例代码)
兼容火狐.Opera.chrome的文字溢出添加省略号的功能,好像以前分享过几款代码了, 但是之前的没考虑过各个浏览器的兼容性问题,现在这款对各大浏览器的兼容都表现不错, 当文字或字符超出外层Div的 ...
CSS 文字溢出部分用省略号代替
1. 单行文字溢出省略只需添加三行代码即可: overflow: hidden; /* 超出的文本隐藏 */ text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本. ...
li 字多出了省略号_文字溢出自动显示省略号css方法 -
文字样式(Text Style)是一组可随图形保存的文字设置的集合,这些设置可包括字体设置以及特殊效果等.文字样式在不同的软件环境下显示的方式也会不一样.下面就来分享一下html中如何让文字竖排?总结 ...
li 字多出了省略号_文字溢出自动显示省略号css方法
这次给大家带来文字溢出自动显示省略号css方法,文字溢出自动显示省略号css的注意事项有哪些,下面就是实战案例,一起来看一下. 我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替 ...
单行文字溢出隐藏显示省略号
单行文字溢出隐藏显示省略号 1. 让换行的文字强制在一行显示.属性 white-space: nowrap; 2. 溢出的部分隐藏.overflow: hidden: 3. 文字溢出显示用省略号. t ...
css文字溢出隐藏为三个点
css文字溢出隐藏为三个点- (1)单行 white-space: nowrap;//不换行 text-overflow: ellipsis;//将文本溢出显示为(-) overflow: hidde ...
css文字溢出部分在另一个div显示（代码篇）
css文字溢出部分在另一个div显示博主博客: 前端代码:html.css(图文混排)文字环绕 - 案例篇以上就是关于 " css文字溢出部分在另一个div显示(代码篇) " ...
CSS处理文字一行显示，超出用省略号。包含一个微信小程序使用css文字溢出一行显示的一个bug
一.核心代码注意:text-overflow 必须要搭配 white-space 才能生效 overflow: hidden; /* 文字溢出隐藏 */ white-space: nowrap; ...
css文字溢出省略号显示
单行文字溢出省略号显示步骤: 1.强制文字一行显示 white-space: nowrap; 2.溢出部分隐藏起来 overflow: hidden: 3.文字溢出的时候用省略号显示 text-ov ...

CSS文字溢出省略号，单行省略号，多行省略号

CSS文字溢出省略号，单行省略号，多行省略号相关推荐

最新文章

热门文章