语法:

text-overflow:clip | ellipsis

默认值:clip

适用于:所有元素

clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。
ellipsis: 当对象内文本溢出时显示省略标记(...)。

在使用的时候,有时候发现不会出现省略标记效果,经过测试发现,使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; width:50%;这三个样式共同使用才会有效果,示例代码:

<style type="text/css">
.test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}
</style> <div class="test">关于**产品的推广关于**产品的推广关于**产品的推广</div>

上面的width属性根据实际需要填写,其它样式是固定的。

转载请注明:http://www.tea119.com

CCS3属性之text-overflow:ellipsis;的用法和注意之处的更多相关文章

  1. jquery html属性和text属性的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 让script的type属性等于text/html

    type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate&quo ...

  3. [CSS]文本属性(Text)

      CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...

  4. Python:bs4中 string 属性和 text 属性的区别及背后的原理

    刚开始接触 bs4 的时候,我也很迷茫,觉得 string 属性和 text 属性是一样的,不明白为什么要分成两个属性. html = '<p>hello world</p>' ...

  5. JavaScript的type属性等于text/html 例子

    在使用JavaScript标签<script>的时候,其中type最常用的就是text/javascript 其实这个type还有其他用法,下面直接给出例子: type属性为text/ht ...

  6. MaskEdit组件的EditText属性和Text属性

    MaskEdit组件主要是EditMask属性 是string属性. 掩码字符串EditMask属性分为3个部分,分别用分号隔开,形式是“XXXXX;X;X” 第一部分是掩码字符串的主要部分,它确定输 ...

  7. Jquery重新学习之一[加载与属性html(),text(),val()]

    一:Jquery加载方式: 1:首先页面加载时马上响应JS代码如下运行(不一定要等所有的JS和图片加载完毕,就可以执行方法): $(document).ready(function(){ }); 另一 ...

  8. 关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)

    text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...

  9. placeholder属性实现text标签默认值提示用户

    <input type="text" class="searchTxt" id=this.id+"-searchTxt" placeh ...

随机推荐

  1. php之curl实现http与https请求的方法

    原文地址:http://m.jb51.net/show/56492   这篇文章主要介绍了php之curl实现http与https请求的方法,分别讲述了PHP访问http网页与访问https网页的实例 ...

  2. 汇编查看StackFrame栈帧

    INCLUDE Irvine32.inc myProc PROTO, x:DWORD, y:DWORD .data .code main proc mov eax,0EAEAEAEAh mov ebx ...

  3. Android笔记:真机调试

    参考:android通过USB使用真机调试程序 手机:华为Y511-U00 1.将手机USB调试模式连接到PC(直接用数据线连接到PC一般可以自动切换) 2.连接成功后提示安装驱动,我选择的是自动安装 ...

  4. LeetCode Binary Search Tree Iterator

    原题链接在这里:https://leetcode.com/problems/binary-search-tree-iterator/ Implement an iterator over a bina ...

  5. js运算之比较大小

    1.大于>和小于< var box = 3 > 2;//关系运算符大多返回的是一boolean值. alert(box); //true 1.2不同类型的数据比较 var box = ...

  6. [BS-10] 统一设置app所有页面的“返回”按钮样式

    统一设置app所有页面的“返回”按钮样式 如果想统一设置app所有页面的“返回”按钮样式,首先自定义WZNavigationController类继承UINavigationController类,然 ...

  7. 互联网4.0时代需要商业智能BI

    当今大数据互联网时代飞速发展,德国提出了工业化4.0, 美国提出了产业互联网,而中国提出了两化深度融合战略.越来越多的企业家开始安耐不住了,开始担心自己的企业是否跟的上时代的变化,是否使用了商业智能B ...

  8. Android -- Looper.prepare()和Looper.loop() —深入版

    Android中的Looper类,是用来封装消息循环和消息队列的一个类,用于在android线程中进行消息处理.handler其实可以看做是一个工具类,用来向消息队列中插入消息的. (1) Loope ...

  9. ASP.NET的运行原理与运行机制 如何:为 IIS 7.0 配置 <system.webServer> 节

    https://technet.microsoft.com/zh-cn/sysinternals/bb763179.aspx 当一个HTTP请求到服务器并被IIS接收到之后,IIS首先通过客户端请求的 ...

  10. RequireJS初探

    什么是RequireJS? /* --- RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino ...