代码如下：

<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div>

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

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

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

三、同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可实现所想要得到的溢出文本

CSS控制文本的长度，超过一行显示省略号的更多相关文章

  1. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

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

  2. css 字数超过一行显示省略号

    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

  3. 问题：css 自动换行；结果：CSS控制文本自动换行

    CSS控制文本自动换行 CSS控制文本自动换行,阅读CSS控制文本自动换行,1.你定死表格的宽度,即给表格一个宽度值(是 数值,不是百分比) 2.强制不换行div{//white-space:不换行; ...

  4. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  5. 复习-css控制文本字体属性

    css控制文本字体属性 font-family:字体系列,如”serif“”sans-serif“ font-size:尺寸 font-style:字体样式,如“normal,italic(斜体).o ...

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

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

  7. TextView设置最多显示指定个字符，超过部分显示...(省略号)

    今天在公司遇到一个需求:TextView设置最多显示8个字符,超过部分显示...(省略号),网上找了很多资料,有人说分别设置TextView的android:signature="true& ...

  8. 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用

    为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...

  9. css控制标题长度超出部分显示省略号

    width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...

随机推荐

  1. SSL剥离工具sslstrip

    SSL剥离工具sslstrip   在日常上网过程中,用户只是在地址栏中输入网站域名,而不添加协议类型,如HTTP和HTTPS.这时,浏览器会默认在域名之前添加http://,然后请求网站.如果网站采 ...

  2. HDU3625 Examining the Rooms

    @(HDU)[Stirling數] Problem Description A murder happened in the hotel. As the best detective in the t ...

  3. 深入理解Activity启动流程(四)–Activity Task的调度算法

    本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 深入理解Activity启动流程(一)--Activity启动的概要流程 深入理解Activity启动流程(二)- ...

  4. 快讯 | FireEye在GitHub上开源密码破解工具GoCrack

    近日,FireEye 开源了一款密码破解工具 GoCrack,可在多机器上部署破解任务. GoCrack 是由 FireEye’s Innovation and Custom Engineering ...

  5. Free Pascal 的安装

    Free Pascal 的安装 https://www.cnblogs.com/cnssc/p/6110492.html https://wenku.baidu.com/view/ee80cc8eed ...

  6. 怎样让Eclipse的智能提示像VS一样霸气

    说起来用Eclipse也有一段时间了.相信每个用过的人都知道他的智能提示功能真的是糟糕透了,与VisualStudio2008简直不是一个档次的!我就纳闷了,他为什么不弄好一点呢.今天我实在是忍不住了 ...

  7. ListView中button监听器 设置 及 优化

    在应用开发中常常会用到ListView,而且每个Item里面都会有button之类的须要进行事件监听的控件.在给button加入OnClickListener的时候,一開始非常下意识的会想在ListV ...

  8. linux查看进程、端口

    1 查看进程pidps -ef|grep tomcat 2 查看进程占用的端口netstat -ntlp|grep pid 3 查看端口对应的进程号lsof -i:portid

  9. nginx源代码分析--配置信息的继承&amp;合并

    这里仅仅讲述http{}模块下的配置: 在ngx_http_block()函数内(这个函数别调用时在ngx_inti_cycle内的ngx_conf_parse函数,这个函数遇到http命令时 回调n ...

  10. 谈谈 T 型人才

    谈谈 T 型人才   昨天的图片发模糊了,正好我把这个话题展开聊一聊吧.这个话题是关于复合型人才的,我把它称作 T 型人才. 「全栈」工程师 前一段时间,「全栈」工程师的概念很火,不过大多数时候,「全 ...