css表格内文字不换行符介绍

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?

下面我们来看一下在表格中设置文字不换行的方法:

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会有“...”,其它的浏览器文本超出指定宽度时会隐藏。

使用的属性介绍:

word-break 属性规定自动换行的处理方法。

语法:

word-break: normal|break-all|keep-all;

属性值:

  • normal 使用浏览器默认的换行规则。

  • break-all 允许在单词内换行。

  • keep-all 只能在半角空格或连字符处换行。

white-space 属性规定段落中的文本不进行换行:

属性值:

  • normal 默认。空白会被浏览器忽略。

  • pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

  • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

  • pre-wrap 保留空白符序列,但是正常地进行换行。

  • pre-line 合并空白符序列,但是保留换行符。

  • inherit 规定应该从父元素继承 white-space 属性的值。

更多CSS3相关技术文章,请访问CSS3答疑栏目进行学习!

以上就是css表格内文字不换行符介绍的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏