text-overflow ： clip | ellipsis

clip：
不显示省略标记（...），而是简单的裁切。
ellipsis：
当对象内文本溢出时显示省略标记（...）
  1. 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
  2. text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>text-overflow</title>

</head>

<body>

<style type="text/css">

.test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}

.test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; background:#ccc;}

</style>

<h2>text-overflow : clip </h2>

<div class="test_demo_clip">

不显示省略标记，而是简单的裁切条

</div>

<h2>text-overflow : ellipsis </h2>

<div class="test_demo_ellipsis">

当对象内文本溢出时显示省略标记

</div>

</body>

</html>

text-overflow 文字溢出时的设置的更多相关文章

  1. CSS 文字溢出时的自动隐藏

    http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...

  2. js 强制换行及 单行文字溢出时出现省略号

    /*强制换行*/.f-break {word-break:break-all; /*支持IE,chrome,FF不支持*/ word-wrap:break-word;/*支持IE,chrome,FF* ...

  3. CSS清除浮动&内容居中&文字溢出

    学习! 1.CSS清除浮动的方法 (1)添加标签清除浮动: 在浮动元素结尾处,并列的添加标签<div style="clear:both;"></div>. ...

  4. EditText设置文字改变时的监听

    textWatcher = new TextChangeWatcher(); etQuerryInfo.addTextChangedListener(textWatcher); /** * 文字改变类 ...

  5. HTML技巧篇：如何让单行文本以及多行文本溢出时显示省略号(…)

    参考:https://baijiahao.baidu.com/s?id=1621362934713048315&wfr=spider&for=pc 本篇文章主要给大家介绍一下在html ...

  6. css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进

    一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...

  7. css+div解决文字溢出控制显示字数

    一.一般的文字截断(适用于内联与块):  Example Source Code [www.mb5u.com] .text-overflow {display:block;/*内联对象需加*/widt ...

  8. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  9. css+div如何解决文字溢出

    看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...

随机推荐

  1. 使用ownCloud搭建你的个人云服务(ubuntu 14.04 server)（ownCloud对文件不切片，Seafile对文件切片），owncloud没有存储的功能 只能同步 本地删除了服务器也会删除

    ownCloud是什么 ownCloud是一个自由且开源的个人云存储解决方案(类似百度网盘或者Dropbox),包括两个部分:服务器和客户端. ownCloud在客户端可通过网页界面,或者安装专用的客 ...

  2. DEVExpress For WPF 中GridControl如何实现滚动分页（延迟查询）

    在显示大量数据时一般采用分页显示,但是最近用户需要滚动显示,那么问题来了,滚动显示要求将数据全部查询回来,这显然会导致显示速度很慢. 好在想到一种方式,就是当用户滚动鼓动条的时候再查询下面的数据.好吧 ...

  3. GStreamer Plugin: Embedded video playback halted; module decodebin20 reported: Your GStreamer installation is missing a plug-in.

    标题是在Linux下使用系统yum install 的opencv库来获取视频帧的时候抛出来的错误消息.opencv调用了Gstream的API来处理了视频.错误抛出的代码如下图: http://ub ...

  4. AQS详解

    一.概述 谈到并发,不得不谈ReentrantLock:而谈到ReentrantLock,不得不谈AbstractQueuedSynchronized(AQS)! 类如其名,抽象的队列式的同步器,AQ ...

  5. 福建省队集训被虐记——DAY4

    啊啊啊啊啊啊第四天考的是我最不擅长的图论--整个人都斯巴达了 //另外不得不吐槽下午的上课讲的都是网络流--难道是出题人觉得图论里除了网络流以外的其他算法都没有人权图样图森破? 愚蠢的算法(clums ...

  6. C# -- 扩展方法的应用（Extension Methods）

    当你有下面这样一个需求的时候,扩展方法就会起到作用:在项目中,类A需要添加功能,我们想到的就是在类A中添加公共方法,这个显而易见肯定可以,但是由于某种原因,你不能修改类A本身的代码,但是确实又需要增加 ...

  7. pyqt tabWidget例子学习1

    from PyQt4 import QtGui from PyQt4 import QtCore from PyQt4.QtCore import pyqtSlot,SIGNAL,SLOT impor ...

  8. jquery常用方法以及详解

    $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg", ...

  9. （3）选择元素——（6）属性选择器（Attribute selectors）

    Attribute selectors are a particularly helpful subset of CSS selectors. They allow us to specify an ...

  10. Duanxx的STM32学习：STM32命名规则