1.

<!DOCTYPE html>

<html>

<head>

<style>

div.test

{

white-space:nowrap;

width:12em;

overflow:hidden;

border:1px solid #000000;

}

</style>

</head>

<body>

<p>下面两个 div 包含无法在框中容纳的长文本。正如您所见，文本被修剪了。</p>

<p>这个 div 使用 "text-overflow:ellipsis" ：</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>

<p>这个 div 使用 "text-overflow:clip"：</p>

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>

</html>

CSS3 text-overflow 属性的更多相关文章

  1. CSS3：overflow属性详解

    1.Overflow overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来: 如果内容超出容器却又不想其隐藏时可以将其属性值设 ...

  2. CSS3对于盒中容纳不下的内容的显示——overflow属性

    overflow属性 1.如果将overflow属性值设定为hidden,则超出容纳范围的文字将被隐藏起来. div{ overflow:hidden; } 2.如果将overflow属性值设定为sc ...

  3. css3 常用的属性

    1.伪类选择符 Pseudo-Classes Selectors Selectors选择符 CSS Version版本 Description简介 E:link CSS1 设置超链接a在未被访问前的样 ...

  4. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  5. CSS3的box-sizing属性

    盒模型的宽度,在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内 W3C标准中的盒模型宽度为内容宽度,不包括内边距paddin ...

  6. 一个需求认识CSS3 的transform-origin属性

    最近遇到一个需求,是以前做PHP的同事问我的问题    下面是他在百度发的问题截图 根据上面的截图,我稍微梳理了一下 问题:现在有个div,旋转45度后,这个div的宽度会动态改变,并且要向右上方偏移 ...

  7. 半深入理解CSS3 object-position/object-fit属性

    半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

  8. 【CSS学习】--- overflow属性

    一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...

  9. overflow属性-摘自网友

    关于我们 版权声明 网站地图 前端观察 专注于网站前端设计与前端开发 用IE6抢不到火车票的!!! Home 首页 CSS样式之美 Front News前端资讯 JavascriptAjax与JS技术 ...

  10. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

随机推荐

  1. OC-弱语法

    [Person test] : unrecognized selector sent to instance 给Person对象发送了一个不能识别的消息 :test

  2. Entity Framework - Using Transactions or SaveChanges(false) and AcceptAllChanges()?

    LINK With the Entity Framework most of the time SaveChanges() is sufficient. This creates a transact ...

  3. django_web代码更新

  4. Linux命令lsb_release：查看当前系统的发行版信息

    Linux里的lsb_release命令用来查看当前系统的发行版信 息(prints certain LSB (Linux Standard Base) and Distribution inform ...

  5. 解决前面有一篇文章中'flashplayer.so为什么要设置777权限的'问题 的 思考了

    列出某个目录下的所有内容? ls -A, -A等同于-a, 即是-all, 只是-A 不显示.和.. ll ls 某个目录, 如果它下面没有任何东西, 那么 就没有输出! 同时, ll某个目录, 不会 ...

  6. LAMP环境CentOS6.4 PHP5.4随笔未整理

    首先安装一些辅助的软件或者说是依赖的关系包. 1.安装libxml2: libxml是一个用来解析XML文档的函数库.它用C语言写成, 并且能为多种语言所调用,例如C语言,C++,XSH.C#, Py ...

  7. git SSH keys

    An SSH key allows you to establish a secure connection between your computer and GitLab. Before gene ...

  8. C#集合u

    List<T> 列表(动态数组),相当于C++的 vector Queue<T> 队列,先进先出 Stack<T> 栈,先进后出 LinkedList<T&g ...

  9. SQL存储过程来调用webservice

    如果用存储过程来调用webservice 那存储过程的功能感觉能做好多事情了? 别自欺欺人了.那些功能还是webservice来实现的... 完整的webservice代码:(也是默认的,新建.asm ...

  10. 自动去除nil的NSDictionary和NSArray构造方法

    http://www.jianshu.com/p/a1e8d8d579c7 极分享 http://www.finalshares.com/