html设置文字超过字数_css限制文字显示字数长度，超出部分自动用省略号显示，防止溢出到第二行...

为了保证页面的整洁美观，在很多的时候，我们常需要隐藏超出长度的文字。这在列表条目，题目，名称等地方常用到。

效果如下:

未限制显示长度，如果超出了会溢出到第二行里。严重影响用户体验和显示效果。

我们在列表样式里添加css，如下图。

修改后效果:

正文开始

(1).文字超出一行，省略超出部分，显示'...'

如果这种情况比较多，可以取一个切合作用的类名用于复用。

.line-limit-length {overflow: hidden;text-overflow: ellipsis;white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...}

最新消息：神秘地球黑洞深不可测，不停吸入周围海水。

//图标字体

(2). 可以给定容器宽度限制，超出部分省略

.product-buyer-name {max-width: 110px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

橘子橘子

html设置文字超过字数_css限制文字显示字数长度，超出部分自动用省略号显示，防止溢出到第二行...相关推荐

css 文字超出部分自动加省略号
在移动端,经常会在适配的时候遇到文字超出的问题,最合理的做法就是超出部分自动加省略号. 用到的属性有 text-overflow: ellipsis; /显示省略符号来代表被修剪的文本/ word-b ...
Android ellipsize属性(多余文字用省略号显示)
TextView中可以设置一个ellipsize属性,作用是当文字长度超过textview宽度时的显示方式: 例如,字符串"abcedfghijklmn" 的各种现实效果: and ...
CSS文字超出部分省略号显示
文章目录[隐藏] CSS 文字超出部分省略号显示前言 CSS 文字超出部分省略号显示实现方法 CSS 文字超出部分省略号显示实现效果 CSS 文字超出部分省略号显示前言在我们开发过程中,其实有这样的 ...
Android 文字过长TextView如何自动截断并显示成省略号
xml布局里需要将textview的下面属性设置下: android:ellipsize="end" android:singleLine="true"其中: ...
html设置文字超过字数_html文本控制显示字数超出用省略号的方法
html文本控制显示字数超出的方法怎么解决?也就是文字溢出控制显示字数,table文字溢出控制td显示字数看到标题你一定很轻易就会想到截断文字加省略号"..."的做法.哈哈,就是 ...
div超出不换行_div+CSS设置一行内文字超过宽度不换行且不显示
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加"..."的做法. 一般的文 ...
文字超过省略_纯CSS实现“文本溢出截断省略”的几种方法
在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节.看上去 "稀松平常" ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基 ...
vue中实现文字超过2行... 展开-收起(兼容ie)
先看看实际效果 2.需求一步一步分析当文字超出省略号就想到css样式实现(ie不兼容) overflow: hidden; text-overflow: ellipsis;display: -we ...
php 合并图片_文字,php合并图片与文字添加到图片里的类，能够设置文字的位置...
class wordsOnImg { /** * a.合成图片信息复制一张图片的矩形区域到另一张图片的矩形区域 * @param [type] $bg_image [目标图] * @param [t ...

html设置文字超过字数_css限制文字显示字数长度，超出部分自动用省略号显示，防止溢出到第二行...

橘子橘子

html设置文字超过字数_css限制文字显示字数长度，超出部分自动用省略号显示，防止溢出到第二行...相关推荐

最新文章

热门文章