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

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

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

.line-limit-length {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap; //文本不换行,这样超出一行的部分被截取,显示...

}

<div class="item">

<p class="line-limit-length">最新消息:神秘地球黑洞深不可测,不停吸入周围海水。</p>

<i class="icon icon-arrow-Go"></i> //图标字体

</div>

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

.product-buyer-name {

max-width: 110px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

<h5 class="product-buyer-name">橘子橘子</h5>

<h5 class="product-buyer-name">橘子橘子匿名用户匿名</h5>

css限制显示字数,文字长度超出部分用省略号表示【转】的更多相关文章

  1. css实现 显示一行文字,超出用...代替

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

  2. CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

    大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...

  3. css 始终显示滚动条,内容超出显示有滑块的滚动条,内容没有超出显示空的滚动条

    1.内容没有超出显示空的滚动条 <div class="div1"> 前端开发者前端开发者前端开发者前端开发者前端开发者 </div> css代码: .di ...

  4. 设置当内容超出div(文字长度超出div宽度)出现滚动条

    overflow 一共有5个属性. 1.overflow:auto:内容会被修剪,超出设置的宽高后会出现滚动条 2.overflow:scroll;内容会被修剪,不管内容是否超出,都会出现滚动条的位置 ...

  5. css限制文字显示字数长度,超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

  6. 【转】如何用css限制文字长度,使溢出的内容用省略号…显示

    文章转自这里(现在貌似被黑了,建议不要点击了) ps:因在该地方没看到转载按钮,复制下存到这里以待自己方便,别人能看到帮助一下更是乐意之至,效果亲测可以实现,兼容IE.谷歌.火狐 由于文字内容长度的不 ...

  7. span标签中显示固定长度,超出部分用省略号代替,光标放到文字上显示全部

    在span中实现显示某段内容,固定其长度,多余部分用省略号代替,这样就用到html的title属性: 如:<span title="value"></span&g ...

  8. CSS——div内文字的溢出部分用省略号显示

    使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分 ...

  9. css控制文字长度,超出长度显示...

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

随机推荐

  1. AliSQL 5.6.32 vs MySQL 5.7.15抢鲜测试

    摘要:    今天我们有幸抢鲜测试AliSQL,直接拿来和MySQL 5.7.15对比看看. AliSQL刚宣布开源,我就提交申请内测名额,节前收到开放内测邀请,于是第一时间进行了测试了解,希望能给大 ...

  2. Atitit hibernate3 hinernate4 hibernate5新特性attilax总结

    Atitit hibernate3 hinernate4 hibernate5新特性attilax总结 1.1. Hibernate3的新特性 1 1.2. hibernate4.1版本中的新特性和h ...

  3. 【Unity】7.5 移动设备输入

    分类:Unity.C#.VS2015 创建日期:2016-04-21 一.简介 在iOS和Android系统中,操作都是通过触摸来完成的.Input类中对触摸操作的方法或变量如下图所示: 通过GetT ...

  4. 【iOS XMPP】使用XMPPFramewok(一):添加XMPPFramework(XCode 4.6.2)

    转自:http://www.cnblogs.com/dyingbleed/archive/2013/05/09/3069145.html XMPPFramework GitHub: https://g ...

  5. 黑马程序猿————Java基础日常笔记---反射与正則表達式

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 黑马程序猿----Java基础日常笔记---反射与正則表達式 1.1反射 反射的理解和作用: 首 ...

  6. How To Download Youtube Videos Without any software

    https://www.quora.com/What-is-the-best-way-to-download-YouTube-videos-for-free There are various met ...

  7. query compiler

    https://db.in.tum.de/teaching/ws1415/queryopt/chapter3.pdf?lang=de pi3.informatik.uni-mannheim.de/~m ...

  8. Eclipse工程文件夹 红叹号

    问题产生: 重装系统后,换了个新版本的Eclipse,但是,使用以前的工程目录(工程目录重命名了)后,发现,一些工程上显示红叹号,仔细查看里面的代码,也没有错误 问题原因: 经过查看,是工程中,使用的 ...

  9. MonoBehaviour类Invoke, Coroutine

    异步函数 在一个方法执行时调用另一个方法.而被调用的方法或者其中的某些语句不是立刻执行,而是过一段时间后才执行. MonoBehaviour提供了两种异步方法 调用(Invoke) 协程(Corout ...

  10. COMPILING ACTIONSCRIPT 3.0 WITH SUBLIME TEXT 2

    At Clock we typically spend our time developing JavaScript and PHP, however, occasionally Flash pres ...