zoukankan      html  css  js  c++  java
  • 【转】如何用css限制文字长度,使溢出的内容用省略号…显示

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

    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;
    }
  • 相关阅读:
    POJ 1953 World Cup Noise
    POJ 1995 Raising Modulo Numbers (快速幂取余)
    poj 1256 Anagram
    POJ 1218 THE DRUNK JAILER
    POJ 1316 Self Numbers
    POJ 1663 Number Steps
    POJ 1664 放苹果
    如何查看DIV被设置什么CSS样式
    独行DIV自适应宽度布局CSS实例与扩大应用范围
    python 从入门到精通教程一:[1]Hello,world!
  • 原文地址:https://www.cnblogs.com/daner1257/p/4315527.html
Copyright © 2011-2022 走看看