CSS实现强制换行-------Day 78

标签：css   学习记录   前端   自动换行   

其实最早的时候也考虑过这个问题，当时还在想需要判定文字的长度么，实在是傻到极点了，原来CSS中本来就有这个样式设置的。而今天正好看到了有这么一篇介绍，仔细看了下，感觉还不错，这里也把实验的结果记录下。

初始阶段：

<span style="font-family:SimSun;font-size:12px;"><div style="width:200px;height:50px;background:yellow;">comedycookidespitelovedescriptiondescription</div>
	<div style="width:200px;height:50px;background:blue;">四大四大四大阿艾弗森的法师打发第三方圣达达菲的冯绍峰打算打</div></span>

这样我们可以看出，如果是英文字符的话，就会超出div的边界了，而汉字倒不会

解决办法：

有两个样式设置是可以解决这个问题的，分别是word-wrap和world-break

先来看第一种word-wrap:break-word;的实现效果

1、加入英文语句时，如果加入后一个单词会超出div范围，则将整个单词进行换行；

2、如果单词过长，但是同一个单词，它会进行断开换行；

而world-break则有两种方式，分别来看：

<div style="width:200px;height:50px;background:yellow;word-break:break-all;">i comedycookidespitelovedescriptiondescription</div>
	<hr/>
	<div style="width:200px;height:50px;background:blue;word-break:break-all;">四大 四大四大阿艾弗  森的法师打发第三方圣达达菲的冯绍峰打算打</div>

1、后一个单词加入后可能超出div边界，先加入词填满div的宽度，超出的单词部分剩余的字母转入下一行；

2、一个单词超出的话就更不用说了，肯定会填满宽度再转入下一行呗。再来看第二种：

<div style="width:200px;height:50px;background:yellow;word-break:keep-all;">i comedycookidespitelovedescriptiondescription</div>
	<hr/>
	<div style="width:200px;height:50px;background:blue;word-break:keep-all;">四大 四大四大阿艾弗  森的法师打发第三方圣达达菲的冯绍峰打算打</div>

1、如果加入下一次后可能会超出边界，那就将整个的下一个次换行；

2、单独的一个单词的话，会保持单词的完整性，从而仍然可能会造成超出边界的情况

其实三种方式里我最喜欢的是第二种：word-break:break-all;可以将字符串进行截断，

而第一种同样可以实现换行效果，在单个单词长度都不长的情况下比较适用，word-wrap:break-word;

而第三种情况word-break:keep-all与第一种情况相似，却又不同，如果存在过长单词的话是无法实现效果的，所以不赞成使用来实现效果

就这样又学到了点东西，心情不错，开森..

CSS实现强制换行-------Day 78,布布扣,bubuko.com

CSS实现强制换行-------Day 78

标签：css   学习记录   前端   自动换行   

原文地址：http://blog.csdn.net/marsmile_tbo/article/details/38308539