CSS换行用省略号代替,也可以说是长标题的文章可以使用简单的CSS样式实现省略号控制显示
代码部分:
一般的文字截断(适用于内联与块):
==============CSS================
.text-overflow{
display:block;
width:31em;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
=================================
对于表格的话,定义有一点不一样:
==============CSS================
table{
width:30em;
table-layout:fixed;
}
td{
width:100%;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
=================================
注:这个东西只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有"...",其它的浏览器文本超出指定宽度时会隐藏。
分享到:
相关推荐
大家在制作的时候有时候会碰到英文文本超过固定宽度,不会自己换行的问题。这种问题以前解决的时候大多都用...2、取之说明 (1)normal和break-word,其中normal为默认值,当其值为normal控制连续文本换行(允许内容顶开容
CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。
通过css样式控制单元格内超长文本自动换行,并且解决了浏览器兼容问题的绝佳文档,值得你一看的文档……
设置div内单行文本截断,文本截断,下载文件内含 关键css和属性解析地址
下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 复制代码代码如下: ”wrap”>正常文字的换行...
CSS控制文本自动换行的问题
在进行DivCSS布局时,需要对文本进行控制,我们在jb51.net以前的文章中,也讲过这方面的知识,今天系统的向大家介绍一下。CSS中控制换行的四种属性。 一、white-space 可以实现HTML中PRE标签的效果,以及单元格的...
CSS配置使表格能自动换行 给table加上style 三种参数不同形式
css文本控制包括越界省略号以及自动换行,具体示例代码如下,大家可以测试下
<ItemStyle CssClass="dxgv"></ItemStyle> <ItemTemplate> <div "><asp:Label ID="lb_op_create_user" runat="server" Text=';Container, "DataItem.op_create_user") %>'> </asp:Label></div> ...
主要介绍了CSS超出文本指定宽度用省略号代替和文本不换行的相关资料,小编觉的实用性非常,特此分享到脚本之家平台,供大家参考
下面小编就为大家带来一篇CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现。小编觉得挺不错的,现在分享给大家,也给大家做个参考
今天碰到了td文字内容不换行,发现是:white-space: nowrap,即强制文本不进行换行,顺便看了一下文本换行的属性word-wrap,总结如下: white-space的默认只是normal,自动换行。 word-break:break-all和word-wrap:...
使用<pre></pre>标签,并设置其样式如下: 复制代码代码如下: pre{ white-space:pre-wrap;... 该CSS方案可让pre标签内的文本自动换行,我在我有的浏览器上都测试了一下,全部支持,IE6,IE7,IE8,Fi
左边图标右边文字超出自动换行.zip https://blog.csdn.net/qq_36413371/article/details/103014799