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. JavaBean出现的目的

    一.JavaBean出现的目的 由于只用JSP开发会发现使用了很多的Scriptlet,会使得jsp文件非常混乱.如果使用了JavaBean,则可以大大减少JSP中代码量. JSP的理想状态是只负责显 ...

  2. jQuery/js 正则收集（邮件验证、）

    var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; //验证邮箱的正则表达式if( ...

  3. [Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作

    写在前面 前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片 ...

  4. jsf简介

    JSF实现了基于web的以下三个梦想 1.java程序员不必顾虑HTTP的细节,可以按照原本熟悉的事件驱动模型来设计后台系统,并通过一个能担保数据类型无误的数据传递接口将后台系统与前台界面结合在一起. ...

  5. 利用Node.js对某智能家居服务器重构

    原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 之前负责过一个智能家居项目的开发,外包重庆一家公司的,我们主要开发服务器监控和集群版管理. 移动端和机顶盒的远程通信是用 ...

  6. protect和private 的区别

    protect和private 的区别 public 表示全局,类内部外部子类都可以访问: private表示私有的,只有本类内部可以使用: protected表示受保护的,只有本类或子类或父类中可以 ...

  7. 【GXZ的原创】C++小游戏——五子棋

    前些时候考完试自己编的带有胜负判定的五子棋. 操作方法:WSAD或↑↓←→移动下棋位置,Space或Enter放置. 如果游戏出现bug,欢迎大家在评论区反馈. #include <stdio. ...

  8. nginx的那些内置变量

    nginx在配置文件nginx.conf中可以使用很多内置变量,配置如下: location /info { add_header 'Content-Type' 'text/html'; echo & ...

  9. shell简单使用

    最近需要用到shell脚本实现关机保护作用,总结下语法 要点: 1.linux下编写的shell脚本不能在window下编写,否则会出现^M的错误,用window编写保存,在linux用vim打开,每 ...

  10. nginx反向代理、根据浏览器分离访问

    环境根据http://www.cnblogs.com/zzzhfo/p/6032095.html配置 修改LB的/usr/local/nginx/conf/nginx.conf upstream st ...