CSS小结:一行内文本超出指定宽度溢出的处理

css

  看到标题你一定很容易就会想到截断文字加“...”的做法。哈哈,就是这样。其实写这篇日志也只是把这样方法做个记录,因为好像还有很多人不记得遇到这样的情况该如何处理。

  我们也可以参考52CSS.com以前的文章:
  CSS对文字溢出时的自动隐藏处理http://www.webjx.com/htmldata/2007-05-05/1178374126.html
  如何设置列表(li)超出部分显示省略号http://www.webjx.com/htmldata/2007-05-05/1178374241.html

  一般的文字截断(适用于内联与块):

.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

  对于表格文字溢出的定义:

table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

  需要你注意的是,这个东东只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,其它的浏览器文本超出指定宽度时会隐藏。

时间: 2024-08-30 19:11:31

CSS小结:一行内文本超出指定宽度溢出的处理的相关文章

css实现li中文本超出行宽自动隐藏

li中的文本超出行宽自动隐藏,在一些新闻类的列表应用中还是比较实用的,具体的实现css样式如下,感兴趣的朋友可以参考下,希望对大家有所帮助     复制代码 代码如下: .aa{white-space:nowrap; text-overflow:ellipsis; overflow: hidden; }

CSS 将超出显示宽度的内容隐藏起来

实现原理: (1)指定宽度:width:300px; (2)overflow:hidden; 将超出内容隐藏 (3)text-overflow:ellipsis; IE 专有属性,当对象内文本溢出时显示省略标记(-) (4)white-space:nowrap; 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象  代码如下 复制代码 <style type="text/css"> .textOverFlow {     width:300px;     over

如何用gdi+来指定一行中文本的不同的颜色?

问题描述 如何用gdi+来指定一行中文本的不同的颜色? 如何用gdi+来指定一行中文本的不同的颜色,效果就是输出的一行字符中我指定的几个字符为特定的颜色表示,该如何做呢? 解决方案 指定一行中文本不同颜色Android --- TextView中文本的不同颜色Android:TextView中文本的不同颜色 解决方案二: 使用渐变画刷即可! 例:textRect表示文本显示矩形区,startColor,endColor文本表示开始及结束颜色 protected override void OnP

CSS手册简编:文本属性

css CSS属性: 6.文本(Text)属性: 这里的属性将影响WEB文档中的文本显示情况. text-indent属性描述文本的缩进程度: 属性名称: 'text-indent'属性值: <length> | <percentage>初始值: 0适合对象: 容器元素是否继承: yes百分比备注: 根据父元素的宽度而定 下面的例子表明段落的缩进值为3em: P { text-indent: 3em } Alignment属性表明文本的对齐方式: 属性名称: 'alignment'

用css来实现标题内容超出长度范围自动省略,且有鼠标提示

很多时候,我们希望一些文字(比如网站首页新闻块的标题),在一行内显示,并且超出它的长度范围时,则加...省略,并且出现提示. 解决办法: 先看示例,,其中表格内左右两块内容完全相同.超出长度的自动省略了,并有提示.注意第二行,在左边,由于容器宽度不够,它是省略有提示的,在右边,由于宽度够,则它是普通模式.你还可以调整IE的"查看 >文字大小",调成不同的字大小看一看,刷新后再调几下. 这里是相关示例代码,你可以修改后运行:<style>#leftnewstd .ell

CSS学习教程:认识会用CSS样式表的文本属性

css|教程|样式表 文本(text):css控制的文本属性主要包括以下四个: text-indent, text-align, text-decoration, text-transform; 1. text-align:属性text-align指文本的对齐方式,其有向左,向右,居中对齐以及自动适应四种对齐方式: text-align: left;text-align: right;text-align: center;text-align: justify; 例:css代码: body {f

JavaScript获取css行间样式,内连样式和外链样式的简单方法_javascript技巧

[行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签,也就是获取到div1 console.log(odiv.style.background); //这样我们就可以获取到了行间的样式了 </script> [内连样式获取] <html>

PHP获取一段文本显示点阵宽度和高度的方法_php技巧

本文实例讲述了PHP获取一段文本显示点阵宽度和高度的方法.分享给大家供大家参考.具体如下: define("F_SIZE", 8); define("F_FONT", "arial.ttf"); function get_bbox($text){ return imagettfbbox(F_SIZE, 0, F_FONT, $text); } function text_height ($text) { $box = get_bbox($text

android webview内容超出屏幕宽度

问题描述 android webview内容超出屏幕宽度 我用webview的loaddatawithbaseurl加载html字符串,但是内容的宽度超出屏幕的宽度了,网上搜的setlayoutalgorithm方法没用啊!我想要的效果是内容最多只显示屏幕的宽度,多了就进入下一行,以上方法无效,4.4版本以上就不行了 解决方案 webview是可以滚动的 解决方案二: Android 获取WebView的内容宽度高度