div内英文不换行问题以及解决方案
div内英文不换行问题以及解决方案
- div盒子中文字换行问题：
- div中放中文的代码：
- div中放英文的代码：
- 解决办法
- 注意
div盒子中文字换行问题：
div设置宽度以后，如果div中放的是中文，默认文字超过div宽度会自动换行，如果是英文，则默认是不换行的，即会超出div的宽度继续显示。这种情况，需要我们通过属性值进行强制换行
div中放中文的代码：
<style> div{width: 200px;height: 200px;color: #fff;background-color: pink;padding: 10px;border-radius: 5px;margin: 0 auto;}</style><body> <div>人最宝贵的东西是生命，生命对人来说只有一次.因此，人的一生应当这样度过:当一个人回首往事时，不因虚度年华而悔恨，也不因碌碌无为而羞愧;这样，在他临死的时候，能够说,我把整个生命和全部精力都献给了人生最宝贵的事业</div>
</body>
效果：
div中放英文的代码：
<style> div{width: 200px;height: 200px;color: #fff;background-color: pink;padding: 10px;border-radius: 5px;margin: 0 auto;}</style><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
效果(不会自动换行)：
解决办法
- word-break:break-all;只对英文起作用，以字母作为换行依据
- word-wrap:break-word; 只对英文起作用，以单词作为换行依据
- white-space:pre-wrap; 只对中文起作用，强制换行
- white-space:nowrap; 强制不换行，都起作用
- white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{width: 30px;/* height: 30px; */border: 1px solid black;margin-top: 20px;}/*只对英文起作用，以字母作为换行依据*/.p1 {word-break: break-all;width: 150px;}/*--只对英文起作用，以单词作为换行依据*/.p2 {word-wrap: break-word;width: 150px;}/*只对中文起作用，强制换行*/.p3 {white-space: pre-wrap;width: 150px;}/*强制不换行，都起作用*/.p4 {white-space: nowrap;width: 10px;}/*不换行，超出部分隐藏且以省略号形式出现*/.p5 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100px;}</style>
</head><body><div class="p1">hello world hello world hello world hello world hello world</div><div class="p2">hello world hello world hello world hello world hello world</div><div class="p3">hello world hello world hello world hello world hello world</div><div class="p4">hello world hello world hello world hello world hello world</div><div class="p5">hello world hello world hello world hello world hello world</div></body></html>
效果：
注意
使用上述属性一定要指定容器的宽度