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. Perl脚本学习经验（四）--Perl中sftp的使用

    使用sftp,需要使用Except模块,该模块需要下载安装在perl目录下,可以上http://www.cpan.org/上下载对应的安装包:1. 用root用户登录环境:2. cd /usr/lib ...

  2. DLL导出与调用约定

    一般来说,从DLL导出函数有两种方法.一种是使用.def文件:另一种是使用__declspec(dllexport). 使用上面两种方法各有优缺点.使用.def文件就是需要额外维护,当导出函数更改名字 ...

  3. App架构经验总结（转）

    原文链接: http://keeganlee.me/post/architecture/20160303 架构因人而异,不同的架构师大多会有不同的看法:架构也因项目而异,不同的项目需求不同,相应的架构 ...

  4. Windows环境下Android NDK环境搭建

    前面介绍Windows下Android 开发环境配置,主要是面向JAVA开发环境,对只做APK上层应用开发人员来讲,基本够用了,由于Linux系统的权限限制和Android封装架构限制,很多涉及底层设 ...

  5. JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...

  6. 搜索算法：深度优先搜索（DFS）

    关于深搜的介绍,在网上有很多,不再赘述.主要以题目形式实例讲解. POJ - 1321 (http://poj.org/problem?id=1321) 题目大意:给出一个棋盘,棋子不能同行同列,求放 ...

  7. mysql数据库引擎问题汇总

    可以使用mysql> show engines;查看mysql支持何种引擎, 其中default表明该引擎为默认引擎. 在windows下面的mysql引擎默认为InnoDB,linux下的为 ...

  8. VirtualBox上Ubuntu 共享文件夹

    1. virtualbox 菜单栏中设备-->共享文件夹,添加一个共享文件夹,比如共享文件夹路径是D:/share,共享文件夹名称是share. 2. 进入虚拟Ubuntu,在命令行终端输入: ...

  9. 搜索（DFS）

    不知道为什么~除了我室友其他的同学都觉得DFS很简单~且比BFS容易得多........我真心不觉得啊T T~我真心觉得BFS比DFS简单得多................= = 为了把DFS完全搞 ...

  10. php开发中的页面跳转方法总结

    PHP页面跳转实现的功能就是将网站中一个网页跳转到另一个网页中.对于刚刚学习PHP语言的朋友来说,是必须要掌握的基础方法. 页面跳转可能是由于用户单击链接.按钮等触发的,也可能是系统自动产生的.页面自 ...