关于在html当中，换⾏的css样式总结
近在做web相关的项⽬，在项⽬当中遇到了相关的⽂字较长的时候出现超出页⾯显⽰的问题，所以要进⾏换⾏操作，在这⾥总结⼀下。<style type="text/css">
/* 强制不换⾏ */
.nowrap{white-space:nowrap;}
/* 允许单词内断句，⾸先会尝试挪到下⼀⾏，看看下⼀⾏的宽度够不够，
不够的话就进⾏单词内的断句 */
.breakword{word-wrap: break-word;}
/* 断句时，不会把长单词挪到下⼀⾏，⽽是直接进⾏单词内的断句 */
.breakAll{word-break:break-all;}
/* 超出部分显⽰省略号 */
.ellipsis{
text-overflow:ellipsis;
overflow:hidden;
}
</style>
在这⾥我们来看⼀下各个属性有那些值定义，分别的作⽤是什么：
white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit;
white-space 属性设置如何处理元素内的空⽩
normal 默认。空⽩会被浏览器忽略。
pre 空⽩会被浏览器保留。其⾏为⽅式类似 HTML 中的 pre 标签。
nowrap ⽂本不会换⾏，⽂本会在在同⼀⾏上继续，直到遇到 br 标签为⽌。
pre-wrap 保留空⽩符序列，但是正常地进⾏换⾏。
pre-line 合并空⽩符序列，但是保留换⾏符。
inherit 规定应该从⽗元素继承 white-space 属性的值。
word-wrap: normal | break-word;
word-wrap 属性⽤来标明是否允许浏览器在单词内进⾏断句，这是为了防⽌当⼀个字符串太长⽽不到它的⾃然断句点时产⽣溢出现象。normal: 只在允许的断字点换⾏(浏览器保持默认处理)
break-word：在长单词或URL地址内部进⾏换⾏
word-break: normal | break-all | keep-all;
word-break 属性⽤来标明怎么样进⾏单词内的断句。
normal：使⽤浏览器默认的换⾏规则。
break-all：允许再单词内换⾏
keep-all：只能在半⾓空格或连字符处换⾏
最后来看⼀下我我定义的换⾏操作和实现的效果：
<style type="text/css">
.mybreak{
word-wrap: break-word;
word-break:break-all;
white-space:pre-wrap;css实现垂直水平居中
}
</style>
实现了⾃动换⾏，在单词内需要断的地⽅也进⾏了换⾏。
同时在这⾥需要注意⼀个问题，在进⾏换⾏的同时也要注意整条语句垂直居中：
所以在这⾥对整⾏的数据进⾏样式的添加：
$tr.children("td").css("vertical-align"," middle"); 如果想实现⽔平居中可以使⽤ text-align:center;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。