width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis;

设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

对应的脚本特性为text-Overflow。

---------------------------------------------------------------------------------

语法:   text-overflow : clip | ellipsis  

参数:   

clip : 不显示省略标记(...),而是简单的裁切   

ellipsis : 当对象内文本溢出时显示省略标记(...)   

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。   

--------------------------------------------------------------------------------

语法: 

overflow : visible | auto | hidden | scroll 

取值: 

visible :  默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 

auto :  在必需时对象内容才会被裁切或显示滚动条 

hidden :  不显示超过对象尺寸的内容 

scroll :  总是显示滚动条

一、仅定义text-overflow:ellipsis; 不能实现省略号效果。   

二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果   

三、同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本显示省略号效果:

css控制标题长度超出部分显示省略号的更多相关文章

  1. CSS控制文字,超出部分显示省略号

    http://www.daqianduan.com/6179.html <p style="width: 300px;overflow: hidden;white-space: now ...

  2. destoon控制标题长度,title中显示全标题 标题字符长度怎么控制?

    如题商品调用出来后,标题的字符长度怎么控制?有哪位高手能帮我解决吗? 小弟在此感谢了. &length=30 //30表示30个字节 <!--{tag("moduleid=5& ...

  3. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

  4. css控制文字长度,超出长度显示...

    css控制文字长度,超出长度显示... .style { max-width: 165px; overflow: hidden; white-space: nowrap; text-overflow: ...

  5. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  6. css 超出部分显示省略号

    代码: overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; 重点代码:text-overflow: ellipsis; 解 ...

  7. CSS实现单行、多行文本超出部分显示省略号

     单行文本超出,代码如下: css代码: <style> .one{ width:200px; overflow: hidden; text-overflow:ellipsis; whit ...

  8. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  9. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

随机推荐

  1. Web API应用架构在Winform混合框架中的应用(4)--利用代码生成工具快速开发整套应用

    前面几篇介绍了Web API的基础信息,以及如何基于混合框架的方式在WInform界面里面整合了Web API的接入方式,虽然我们看似调用过程比较复杂,但是基于整个框架的支持和考虑,我们提供了代码生成 ...

  2. 使用jquery的append(content)方法的注意事项

    append(content)函数:向每个匹配的元素内部追加内容. 如以下示例: 向所有段落中追加一些HTML标记. HTML 代码: <p>I would like to say: &l ...

  3. .net微信公众号开发——消息与事件

    作者:王先荣    本文介绍如何处理微信公众号开发中的消息与事件,包括:(1)消息(事件)概况:(2)验证消息的真实性:(3)解析消息:(4)被动回复消息:(5)发送其他消息.    开源项目地址:h ...

  4. Win10怎么输入法切换

    按 windows 键+空格键,或者CTRL+Shift,或者只按 Shift,或者CTRL+空格 试试 方法/步骤1在桌面上点击[控制面板],进入控制面板后使用分类显示控制面板内的选项.然后在语言下 ...

  5. 转型?还是延伸?开源建站系统近乎推整套SNS社区解决方案

    转型?还是延伸?开源建站系统近乎推整套SNS社区解决方案 近乎(英文:Spacebuilder),作为.net领域的SNS社区建站系统代表之一,一直在技术开发领域算是兢兢业业,在Discuz!和Php ...

  6. $("").click与onclick的区别示例介绍

    Html代码: <script type="text/javascript"> $(function(){ $("#btn4").click(fun ...

  7. jquery更改加载图片大小

    <script type="text/javascript"> $("img").css("width","80%&q ...

  8. 疯狂Android讲义 - 学习笔记(一)

    常用开发工具的用法 android : 启动Android SDK管理器 android --help  查看具体用法 android create avd -n t10 -t 10 -b armea ...

  9. Java基础复习笔记系列 二

    1.Java中Static的相关用法总结?(静态方法:静态变量:静态代码块) public static void main(String args[])执行的关键,在于有static.有了stati ...

  10. js中typeof的使用方法

    typeof在js中是一个一元操作符,可以判断操作数的类型,其返回值为字符串,有number.string.object.boolean.function.undefined.使用方式可以是typeo ...