整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
我们在定义列表时，我们通常想得到如下的效果：
下面是我们的html代码：
<dl>
<dt>Name:</dt>
<dd>Lea Verou</dd>
<dt>Email:</dt>
<dd>lea@verou.me</dd>
<dt>Location:</dt>
<dd>Earth</dd>
</dl>实际得到的效果是
当我们想得到最上面的效果时，第一步通常是：
<style>
dd{
margin: 0;
font-weight: bold;
}
</style>因为<dt>和<dd>是块级元素，所以所有的名和值都各占一行，我们可能通过改变<dt>或<dd>的display属性来做尝试：
dd, dt{
display: inline;
}如上，我们缺少几个换行
实际上有一个Unicode字符专门代表换行符：0x000A。在CSS中，我们可以用"\A"表示，我们可以把它作为::after伪元素的内容，添加到dd的尾部，但是你会发现并没有什么作用，但这并不代表我们错了，而是在HTML代码中，默认情况下换行符会与相邻的其他空白符进行合并，我们这里保留源代码中的这些空白符和换行，因此我们这么做：
dd, dt{
display: inline;
}
dd::after{
content: "\A";
white-space: pre;
}
dd{
margin: 0;
font-weight: bold;
}很明显，我们已经得到了我们想要的效果，不过如果我们尝试如下时：
由于我们在每个dd后面都加了一个换行符，每个值都会分到单独一行，甚至不需要换行的时候也是如此。因此我们需要采取类似if else的判断：
dd + dt::before{
content: "\A";
white-space: pre;
}
dd + dd::before{
content: ', ';
font-weight: normal;
margin-left: -.25em;
}另外上述的margin是为了修正逗号前的空格，尺寸是需要根据字体个尺寸调试的。
当我们不设置换行的时候，默认浏览器会因为字母或特殊符号导致不进行自动换行。特别是在移动端网页会出现左右移动导致页面不美观。
1.word-wrap（允许单词换到下一行）
2.white-space（文本出现空格符的解决办法，忽略或连续空格合并）
3.word-break（单词截断办法，在全角截断或单词内部截断）
也就是当因为单词长度超过所设定文本宽度时，会另外起一行，而不是与之前的文字共同挤一行。
当文本因特殊字符或英文字母超出设定范围内容的时候，可以使用上述两种解决办法，各有利弊，一个会另起一行，保证单词完整性，一个会截断单词影响单词语意。
SS：
{
word-break: keep-all;
word-wrap: break-word; // 只对英文起作用，以单词作为换行依据。
white-space: pre-wrap; //只对中文起作用，强制换行。
text-align:justify; //css英文语句的两端对齐：
text-justify:inter-ideograph;
}
禁止换行：
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis; //让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器，Opera浏览器用-o-text-
white-space:nowrap;
}
单行文字如果超出2行用省略号表示：
.text {
width:220px;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
word-break 属性规定自动换行的处理方法。
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
word-break 当行尾放不下一个单词时，决定单词内部该怎么摆放。
break-all: 强行上，挤不下的话剩下的就换下一行显示呗。
keep-all: 放不下了，那就另起一行展示，再放不下，也不退缩。
word-wrap 当行尾放不下时，决定单词内是否允许换行
normal: 单词太长，换行显示，再超过一行就溢出显示。
break-word: 当单词太长时，先尝试换行，换行后还是太长，单词内还可以换行。
white-space: normal | nowrap | pre | pre-wrap | pre-line
pre: 保留所有的空格和回车，且不允许折行。
pre-wrap: 保留所有的空格和回车，但是允许折行。
pre-line: 会合并空格，且允许折行
text-align:justify 是专门为英文设计的，用来实现英文语句的两端对齐
text-justify :
auto | distribute |distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper
auto :
默认值。允许浏览器代理用户确定使用的两端对齐法则。
distribute :
处理空格很像newspaper ，适用于东亚文档。尤其是泰文。
distribute-all-lines :
两端对齐行的方式与distribute 相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档
distribute-center-last :
未实现。
inter-cluster :
调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的。
inter-ideograph :
为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格
inter-word :
通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效
kashida :
通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持
newspaper :
通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式
说明：设置或检索对象内调整文本使用的对齐方式。因为这个属性影响文本布局，所以text-align 属性必须被设置为justify 。此属性只作用于块对象。此属性对于currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textJustify 。
以上方法对chrome（360也是chrome内核）无效，还需再加上下面代码：
word-break:break-all
*请认真填写需求信息，我们会在24小时内与您取得联系。
