前言

本篇文章主要记录了css样式设置文本超出部分省略号显示，适用于input标签和普通标签文本内容超出部分省略号显示。

一、三个属性

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

二、属性使用

overflow属性的使用：特点：必须给块级容器指定高度，或者，使用不换行属性让内容变宽
属性值：visible：默认值。hidden：内容会被修剪，浏览器会显示滚动条。scroll：由浏览器定夺，如果内容被修剪，会显示滚动条。auto：规定从父元素集成overflow属性的值。
white-space属性的使用：处理元素中的空白
属性值：常用normal：文字换行。nowrap：文字不换行。
text-overflow属性的使用：特点：该属性不会强制发生溢出，要是文本溢出其容器，必须设置overflow和white-space
属性值：clip：默认值，换行。ellipsis：显示一个‘...’来表示剪切文本

三、使用

<style>
div{white-space:nowrap; width:100px; overflow:hidden; border:1px solid #000000;
}
</style><div style="text-overflow:ellipsis;">this is test text 'overflow:ellipsis'
</div>
<input style="text-overflow:ellipsis;" value="this is test text overflow:ellipsis"/>

运行示例：

总结

如有问题欢迎指出，互相学习。

css使用三个属性设置文本结尾省略号显示相关推荐

CSS基础之背景属性设置
CSS设置背景,不但包括背景的颜色,还包括背景图片等设置,还是老规矩演示比较靠谱. 背景背景颜色背景颜色和文本颜色不同,一个是设置的是文本的颜色,一个是背景的颜色.使用的是backgrou-col ...
css如何利用transparent属性设置透明度？transparent属性绘制各种三角形
想到用css设置元素透明度,大家的第一反应会是:用Opacity属性来设置透明度,其实在css中还有其他设置透明度的方法.本章给大家介绍用transparent属性设置透明度,以及用transpare ...
CSS设置文本超出隐藏显示省略号
CSS设置文本超出隐藏显示省略号单行文本多行文本在线试一试单行文本 HTML代码如下: <pclass="ellipsis1"title="单行文本,超出隐 ...
html不换行溢出省略号代替,css控制不溢出,不换行,溢出部分省略号显示
css控制不溢出,不换行,溢出部分省略号显示:white-space:nowrap;text-overflow:ellipsis;overflow:hidden; ext-overflow 取值: c ...
css中字体与段落属性设置/文本高级样式
CSS中字体与段落属性毫无疑问,不管什么网站,文字一定是必不可少.文字可以是网页传播信息的主要手段.那么怎么显示文字,才能更加的美观,那么大家需要了解以下文字属性. 字体属性属性用途语法(一些 ...
html中加粗的字体如何改细,css font-weight 属性设置文本字体的粗细
css font-weight介绍在CSS中,font-weight属性用来定义字体粗细.font-weight属于css1版,所以所有主流浏览器都支持font-weight属性. 初学者要注意,字 ...
CSS中的字体属性和文本属性总结
文章目录一.字体属性 1.用行高让单行文本居中 2.font属性简写 3.字体加粗属性 4.大小写转换二.文本属性 1.空白处理 2.overflow属性:超出范围的内容处理一.字体属性 css ...
linux多线程学习(三)——线程属性设置
在上一篇文章中,介绍了线程的创建和退出,以及相关函数的使用.其中pthread_create函数的第二个参数,是关于线程属性的设置,这也是今天所有讲述的.这些属性主要包括邦定属性.分离属性.堆栈地址. ...
Android ellipsize属性(多余文字用省略号显示)
TextView中可以设置一个ellipsize属性,作用是当文字长度超过textview宽度时的显示方式: 例如,字符串"abcedfghijklmn" 的各种现实效果: and ...

css使用三个属性设置文本结尾省略号显示

文章目录

前言

一、三个属性

二、属性使用

三、使用

总结

css使用三个属性设置文本结尾省略号显示相关推荐

最新文章

热门文章