text-overflow:ellipsis的巧妙运用

关键字: text-overflow:ellipsis

语法：text-overflow : clip | ellipsis

取值：

clip ：默认值。不显示省略标记(...)，而是简单的裁切.

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

可惜text-overflow 还只是ie的私有属性而已，也没被收录到w3c标准里 .

如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...

这样写：例如

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

#box{width:100px;background-color:#87CEEB;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

</style>

</head>

<body>

<div id="box">锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</div>

</body>

</html>

注意：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用

1.一定要给容器定义宽度.

2.如果少了overflow: hidden;文字会横向撑到容易的外面

3.如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉

4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:clip.

如果容器是table，当文字内容过多时，不换行，而是出现...

这样写：例如

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

table{table-layout:fixed;width:106px;}

td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

</style>

</head>

<body>

<table cellspacing="0" cellpadding="0"><tr><td>锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</td></tr></table></body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

</body></html>

注意：

1.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed，下面td的定义才能起作用。

其它的要点和上面一样

text-overflow 的兼容性：

测过ie6，ie7，ff3，safari，opera，chorme，只有ff3和opera不兼容

转载于:https://www.cnblogs.com/luckk/p/4110839.html

text-overflow:ellipsis的巧妙运用相关推荐

html5 text overflow,text-overflow属性怎么用
text-overflow属性用于指定当文本溢出包含它的元素时,应该发生的事情. CSS3 text-overflow属性作用:text-overflow 属性规定当文本溢出包含元素时发生的事情. ...
web兼容性面试题及答案
1. HTML 对象获取问题 FireFox:document.getElementById("idName"); ie:document.idname 或者 document.g ...
css使用三个属性设置文本结尾省略号显示
三个css属性设置文本内容超出部分,省略号显示文章目录前言一.三个属性二.属性使用三.使用总结前言本篇文章主要记录了css样式设置文本超出部分省略号显示,适用于input标签和普通标签 ...
img 隐藏_CSS3界面样式和溢出文字隐藏overflow
哈喽大家好,我是作者"未来",本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦! 志同道合的小伙伴跟我一起学习交流哦! 第二阶段 CS ...
解决text-overflow: ellipsis;不生效的问题
按照text-overflow: ellipsis;使用规则,在标签样式中添加该属性未生效,例如: 写道 .text { text-overflow: ellipsis; } <div clas ...
Flutter Text详解
示例 API Text,很常用的一个Widget:用于显示简单样式文本,它包含一些控制文本显示样式的一些属性 text构造方法源码: /// If the [style] argument is nu ...
【Flutter】Text的使用
想了解更多关于Flutter的知识,可以关注: https://github.com/jiangkang/flutter-system https://jiangkang.tech 文本作为UI最基本 ...
从零开始前端学习[17]:overflow超出是否隐藏的使用方式
overflow超出是否隐藏的使用方式 overflow属性及属性值的使用单方向属性:overflow-x 单方向属性:overflow-y 提示博主:章飞_906285288 博客地址:http ...
表格单元格中的CSS文本溢出？
本文翻译自:CSS text-overflow in a table cell? I want to use CSS text-overflow in a table cell, such that ...

text-overflow:ellipsis的巧妙运用

text-overflow:ellipsis的巧妙运用相关推荐

最新文章

热门文章