关于a标签不换行顶开容器的问题(转自):
我们用div,p,ul,li(等块级元素)布局给其设定了特定的width,那么就会自动的换行。用span,a(等内联元素)设置了display:inline-block,或者display:block;也可以自动换行了。(但是含英文的时候这种方法就无效了,还是会超出来)
我们一般控制换行所用到的CSS属性一共三个:word-wrap;word-break;white-space;
word-wrap语法:各浏览器均能识别 word-wrap:normal(默认)|break-word;
网上的结论
word-wrap:normal(默认)|break-word;
参数:
normal:允许内容顶开指定的容器边界。
break-word:内容将在边界内换行,必要时触发word-break(注意请分辨清楚word-break和break-word两个是不同的东西,一个为属性,一个为参数);
说明:
word-wrap是控制是否”为词断行”的,设置或检索当前行超过指定容器时是否断开转行。中文没有任何问题,语句也没有问题,但是对于长串的英文,就不起作用。
范例:
congratulation这个单词属于长串英文,word-wrap:break-word整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断,这就是对于长串文字不起作用的解释。word-wrap:normal是默认情况,英文单词不被拆开。
时间: 2024-09-29 15:26:22