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;
    }
  • 相关阅读:
    学习进度表
    数据结构思维导图
    数据结构笔记(树与二叉树)
    图片链接缝隙(a于img) mn
    如何用div实现(滑动条)侧边导航栏 mn
    去除Linux文件中的注释行和空行 mn
    高度塌陷 mn
    初入HTML5
    bcp命令详解转载
    windows 下andriod 开发环境的搭建
  • 原文地址:https://www.cnblogs.com/daner1257/p/4315527.html
Copyright © 2011-2022 走看看