苏州网站怎么做,职友集 一家做公司点评的网站,网站栏目策划方案,网站开发任务书div内英文不换行问题以及解决方案 div盒子中文字换行问题#xff1a;div中放中文的代码#xff1a;div中放英文的代码#xff1a; 解决办法注意 div盒子中文字换行问题#xff1a;
div设置宽度以后#xff0c;如果div中放的是中文#xff0c;默认文字超过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;}/stylebody div人最宝贵的东西是生命生命对人来说只有一次.因此人的一生应当这样度过:当一个人回首往事时不因虚度年华而悔恨也不因碌碌无为而羞愧;这样在他临死的时候能够说,我把整个生命和全部精力都献给了人生最宝贵的事业/div
/body效果
div中放英文的代码 style div{width: 200px;height: 200px;color: #fff;background-color: pink;padding: 10px;border-radius: 5px;margin: 0 auto;}/styledivaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/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 langenheadmeta charsetUTF-8titleDocument/titlestylediv{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
/headbodydiv classp1hello world hello world hello world hello world hello world/divdiv classp2hello world hello world hello world hello world hello world/divdiv classp3hello world hello world hello world hello world hello world/divdiv classp4hello world hello world hello world hello world hello world/divdiv classp5hello world hello world hello world hello world hello world/div/body/html效果
注意
使用上述属性一定要指定容器的宽度
