Html table td 内容自动换行 - 井底之猿 - CSDN博客

  1. td随着内容自动适应宽度：
<td style="word-wrap:break-word;word-break:break-all;" width="100px";></td>
注：
必须设置td的宽度
word-wrap：设置或检索当前行超过指定容器的边界时是否断开?>转行
normal: 默认值。允许内容顶开指定的容器边界
break-word: 内容将在边界内换行。如果需要，词内换行( word-break )也将发生
word-break:设置或检索对象内文本的字内换行行为。尤其在出现多种语言时
normal: 默认值。允许在词间换行
break-all: 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文>本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all: 与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

css属性 ：word-wrap允许长单词或 URL 地址换行到下一行。
实例：允许长单词换行到下一行：

p{ word-wrap:break-word;}

值 描述
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。

css属性 ：white-space设置如何处理元素内的空白。
实例：规定段落中的文本不进行换行：

td{ white-space: nowrap;}

值 描述
normal （默认）空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML pre中的标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

文本在一行内显示，超出则加省略号： 需要宽度(width:100px)、 溢出内容隐藏（overflow:hidden;）、 强制在同一行显示（white-space: nowrap;）、 省略号（text-overflow:ellipsis;）

p{  width: 100px;   overflow: hidden;   white-space: nowrap;    text-overflow: ellipsis;}

Original url: Access
Created at: 2019-03-13 13:43:39
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论