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

最新推荐文章于 2024-05-30 20:54:35 发布

weixin_30794499

最新推荐文章于 2024-05-30 20:54:35 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/daner1257/p/4315527.html

本文介绍了如何通过CSS样式限制文字长度，使其在页面中不超过限定区域，并且当文字内容超出限定长度时，会自动换行并用省略号...显示。该方法兼容多种浏览器，包括IE、谷歌、火狐等。

文章转自这里(现在貌似被黑了，建议不要点击了)

ps：因在该地方没看到转载按钮，复制下存到这里以待自己方便，别人能看到帮助一下更是乐意之至，效果亲测可以实现，兼容IE、谷歌、火狐

由于文字内容长度的不确定,而网页的布局精确性,如果文字内容超出限定的区域(div,span等),会使页面变形.为了满足页面的布局合理,用css样式自动限制文字长度,使溢出内容用省略号…显示.

限制文字长的css样式如下:

.text_overflow{
width:320px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden;
}

此样式兼容ie,chrome,safari,opera,firefox6+版本,但是不兼容firefox低版本.
要想兼容低版本的firefox需要加入一个文件:ellipsis.xml,内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<bindings  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <binding id="ellipsis">
    <content>
      <xul:description crop="end" xbl:inherits="value=xbl:text">
        <children/>
      </xul:description>
    </content>
  </binding>
</bindings>

之后,css样式修改如下:

.text_overflow{
width:320px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;-moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;
}

转载于:https://www.cnblogs.com/daner1257/p/4315527.html