div+css设置文字不换行

转载 2013年12月03日 09:21:56

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“...”的做法。

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

对于表格的话,定义有一点不一样:
==============CSS================ 
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会有“...”,其它的浏览器文本超出指定宽度时会隐藏。

转载于:“http://blog.csdn.net/herb777/article/details/7652343

CSS实现div或ul,li水平对齐不换行

在网页前端开发中,我们可能会经常用到走马灯特效,于是乎就需要用CSS来实现文字或图片水平对齐但不换行的效果,用div+table可是很实现这个效果,但是要用div或ul,li来做就难了,大部分人都会想...

DIV+CSS实操七:中文系内容模块控制文本不换行和超出指定宽度后用省略号代替

在做经管系主网页的同时也在进行着中文系主网页的构建,果然是只有自己去实践了,才能遇到各种各样的问 题,然后再去寻找解决这些问题的方法,最后进行修改和不断的调试,最后达到自己想要的效果。中文系主网页构...

CSS实现DIV或者TD中强制不换行

因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因。 如有冒犯请联系本人,或删除,或标明出处。 因为好的文章,以前只想收藏,但连接有时候...

设置div中文字超出时自动换行和css实现文本超出N行之后显示省略号等

一、对于div强制换行 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; w...

解决 HTML div css 强制 换行 不换行

1、强制不换行,同时以省略号结尾。 你好朋友朋友朋友我为什么不能看到效果啊 2、css自动换行 div{ word-wrap: break-word; word-break: norma...
  • Ray_Adon
  • Ray_Adon
  • 2011年12月07日 11:11
  • 15803

css 文字自动换行并垂直居中div效果

一个学习使用的笔记实例,用纯css 实现css 文字自动换行并垂直居中div效果,这样就像表格一样可以实现不管多少内容都可以居中显示了哦。 ...

li内容不换行、div加滚动条

昨天在使用css结合div布局的时候碰到了一个问题。     在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里   ...

CSS中的强制换行与强制不换行

  • 2012年08月11日 17:03
  • 226B
  • 下载

css中保证内容遇到空格或其他标点符号不换行

原文地址:  http://www.ossi.cn/2011-11/css-white-space/ 项目中遇到这么一个情况:一个规定宽度的DIV里面需要横向排列一span来放置数据,每...

css不换行相关易混属性

white-space :nowrap; word-break:keep-all; white-space  设置或检索对象内空格的处理方式。 white-space:normal | pr...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div+css设置文字不换行
举报原因:
原因补充:

(最多只允许输入30个字)