代码如下：

<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. SSH命令总结

    目录 一.ssh命令 二.端口转发 三.scp 命令 四.rsync命令 五.sz和rz命令 六. ssh-agent 七.ssh执行命令不退出问题 参考文章 一.ssh命令 登录类型 密码登录: 服 ...

  2. Xamarin.Forms XAML控件的公共属性

    Xamarin.Forms XAML控件的公共属性   Xamarin.Forms XAML控件有很多.通过官网API,可以查看每个控件的属性.但是官网只给出了控件的特有属性,而公共属性没有列出.所以 ...

  3. Symmetric Tree（DFS，二叉树的构建以及测试代码）

    基础有待加强啊,由该题引发出来一些问题,现在来总结下. 首先是二叉树的结构: struct TreeNode { EleType val; TreeNode *left; TreeNode *righ ...

  4. [CQOI2018] 社交网络

    题目背景 当今社会,在社交网络上看朋友的消息已经成为许多人生活的一部分.通常,一个用户在社交网络上发布一条消息(例如微博.状态.Tweet等) 后,他的好友们也可以看见这条消息,并可能转发.转发的消息 ...

  5. [LibreOJ β Round #4] 子集

    显然是个二分图,直接求最大独立就行了. #include<bits/stdc++.h> #define ll long long #define pb push_back using na ...

  6. SpringUtils写法

    @Componentpublic class SpringUtils implements ApplicationContextAware { @Override public void setApp ...

  7. 邁向IT專家成功之路的三十則鐵律 鐵律十五：IT人生活之道-赤子之心

    人的年齡與身體可以因歲月的無情不斷老化,但我們的這一顆心可千萬不要跟著老化.身為IT工作者的我們,每天除了要面對那死板僵硬的電腦挑戰之外,可能還要面臨許多人事方面的紛擾.這時候如果在平日的生活之中,仍 ...

  8. Android 检查输入

    在开发过程中,会经常遇到这样的需求:上面有很多的输入控件,等所有的输入都合法后,按钮才能自动变成enabled的状态,才能继续下一步的操作. 下面是一种用观察者模式实现的一种解决方案. button代 ...

  9. Android:MVC模式(下)

    在上一篇文章中,我们将 View 类单独出来并完成了设计和编写.这次我们将完成 Model 类,并通过 Controller 将两者连接起来,完成这个计算器程序. 模型(Model)就是程序中封装了数 ...

  10. 如何直接打开使用locate等查找到的文件

    很多的时候需要使用locate去定位文件,找到了文件之后接下来就是使用相应的文本编辑工具如gvim进行打开. 这个时候最烦心的就是去复制一大长串的地址了. 如果能让定位和打开一体操作就最好了,这就需要 ...