clip：当内联内容溢出块容器时，将溢出部分裁切掉。

ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）。

当块容器 <' overflow '> 为非visible时，定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符

要使得 <' text-overflow '> 属性生效，块容器必须显式定义 <' overflow '> 为非visible值，同时显式或者隐式的定义 <' width '> 为非auto值， <' white-space '> 为nowrap值。
我们将text-overflow生效必备的3个属性： <' overflow '> , <' width '> 和 <' white-space '> 都直接定义在了内联内容的父级块容器上
<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>text-overflow_CSS参考手册_web前端开发参考手册系列</title>

<style>

.test li{margin-top:10px;}

.test .clip p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:clip;}

.test .ellipsis p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;}

</style>

</head>

<body>

<ul class="test">

    <li class="clip">

        <strong>clip: 直接将溢出的文字裁剪</strong>

        <p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p>

    </li>

    <li class="ellipsis">

        <strong>ellipsis: 将溢出的文字显示省略标记（...）</strong>

        <p>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</p>

    </li>

</ul>

</body>

</html>
方法（此方法Firefox5.0尚不支持）：

#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。

原文出处：http://gucong3000.github.io/css-book/properties/user-interface/text-overflow.htm

css3 文本超出后出现省略号的更多相关文章

  1. CSS3 文本超出后显示省略号...

    纯用CSS实现,主要采用代码 overflow:hidden; text-overflow:ellipsis;//这是让文本溢出后,显示成省略号. white-space:nowrap;//禁止自动换 ...

  2. CSS3文本超出容器显示省略号之text-overflow属性

    text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 要想实现文本超出容器时显示省略号,上面3个属性必须同时搭配使用

  3. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  4. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  5. css文本超出隐藏显示省略号

    p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...

  6. css文本超出部分用省略号表示

    以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden   (超出部分隐藏) white-space:nowrap    (强制不换行) tex ...

  7. css兼容大部分浏览器的文本超出部分显示省略号

    css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; t ...

  8. css-文本超出后显示省略号

    1.如果是单行文本: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2.如果是多行文本,将文本框高度设为文字行高的倍数 ...

  9. CSS控制文本超出后隐藏并用省略号代替

    一.仅定义text-overflow:ellipsis; 不能实现省略号效果. 二.定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果. ...

随机推荐

  1. 关于java IO 过程当中同时读写的问题

    今天在写一个linux的java守护进程的时候,无意间就用到了java同时读写的功能. 看错误代码: package cn.sunchuanzhen.main; import java.io.Buff ...

  2. 能让你成为更优秀程序员的10个C语言资源

    能让你成为更优秀程序员的10个C语言资源 本文由 伯乐在线 - archychu 翻译自 mycplus.欢迎加入 技术翻译小组.转载请参见文章末尾处的要求. 一些人觉得编程无聊,一些人觉得它很好玩. ...

  3. centos6.5 无线网卡配置

    来自:http://liqirui.blog.51cto.com/4662702/1344877         http://wiki.centos.org/zh/HowTos/Laptops/Wp ...

  4. Xmanager Enterprise 4 使用说明

    Xmanager Enterprise 4 使用说明 安装Xmanager Enterprise 4操作步骤比较简单,下一步即可完成. Xbrowser 使用xdcmp 协议通过图形化桌面远程连接到l ...

  5. Visual Studio统计有效代码行数

    在网上看到别人用的方法: 按CTRL+SHIFT+F (Find in files),勾上支持正则表达式,然后输入搜索内容: ^:b*[^:b#/]+.*$ 以上表达式的统计可做到:#开头和/开头或者 ...

  6. WordPress get_allowed_mime_types函数(wp-includes/functions.php)存在跨站脚本漏洞

    漏洞版本: WordPress 3.6 漏洞描述: CVE ID:CVE-2013-5738 WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设 ...

  7. wps操作记录

    WPS Excel 1.点击插入---形状:画好方框,选中后右键“编辑文字”,在方框中加入你需要的文字信息 2.点击插入---形状:画出连接线,按住SHIFT拖动可以水平或垂直的直线 3.调整位置.选 ...

  8. 设计模式（c#）代码总结

    设计模式分为三种类型 创建型模式:简单工厂.工厂方法模式.抽象工厂模式.建造者模式.原型模式.单例模式 结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式. 行为型模式 ...

  9. wpa_supplicant对wep,wpa,wpa2的psk和隐藏ap的scan_ssid扫描配置

    # 请不要修改下面这一行内容,否则将不能正常工作ctrl_interface=/var/run/wpa_supplicant # 确保只有root用户能读取WPA的配置ctrl_interface_g ...

  10. WEB安全测试的类型

    1.跨站脚本(XSS) XSS又叫CSS(CROSS SET SCRIPT),跨站脚本攻击.它指的是恶意攻击者往WEB页面里插入恶意的html代码,当用户浏览该页面时,嵌入其中的html代码会被执行, ...