CSS-英文字符自动换行的问题

CSS-英文字符自动换行的问题

灵芸 发布于 2017-09-29 字数 100 浏览 1312 回复 5

一般在做英文网站时,DIV对于很长的一段英文没办法自动换行,如何让其自动换行,并兼容所有浏览器。

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

瑾兮 2017-11-06 5 楼

 div { word-wrap: break-word; word-break: break-all; }

注意这个
break-word : 内容将在边界内换行。如果需要,词内换行( word-break )也将发生

晚风撩人 2017-10-29 4 楼

【常规描述】:对于所有中文字符和正常的英文字符不加任何css修饰完全可以实现文字超宽的自动换行。
【问题描述】:问题出来对于一个很长的英文字符来说,超宽后在FF下会超过边界,IE下则会称大其父元素;
【解决办法】:
首先我们必须弄清楚这2个属性,他们都是控制文字换行的:
1)word-wrap: break-word;
2)word-break: break-all;

word-wrap:当内容超宽时的处理办法,是控制换行的,break-word也就是说强制换行,但是把整个单词看成一个整体,但超宽时,会把整个单词换到下一行;
word-break:是控制是否断词的,break-all是在单词到边界时,下个字母自动到下一行,也就是会截断单词;
那么问题也就解决了,对于顽固的长串英文单词的处理办法,如果我们把这2个属性都写上的话,是可以解决这个问题,但新的问题来了,对于一个正常长度的英文单词也会被强制截断,只是因为一个长串单词而大大的影响了我们阅读其他内容,所以不可取;
我们只是想不要让特别的个体把容器撑大就好了,overflow:hidden现在问题就解决了;
css代码:word-wrap: break-word;overflow:hidden;
【浏览器测试结果】:
IE(6 7 8 9)、Chrome、Friefox、Opera、Safari全部通过;

想挽留 2017-10-28 3 楼

css来强制换行:

style="word-wrap: break-word; word-break: break-all;"

在firefox是不兼容的,改成:

style="word-wrap: break-word; word-break: break-all;overflow:hidden;"

提供一个js实现php的wordwrap函数的功能:

function wordwrap(str, int_width, str_break, cut) {
    var m = ((arguments.length & gt; = 2) ? arguments[1] : 75);
    var b = ((arguments.length & gt; = 3) ? arguments[2] : "n");
    var c = ((arguments.length & gt; = 4) ? arguments[3] : false);
    var i, j, l, s, r;
    str += '';
    if (m & lt; 1) {
        return str;
    }
    for (i = -1, l = (r = str.split(/rn|n|r/)).length; ++i & lt; l; r[i] += s) {
        for (s = r[i], r[i] = ""; s.length & gt; m; r[i] += s.slice(0, j) + ((s = s.slice(j)).length ? b: "")) {
            j = c == 2 || (j = s.slice(0, m + 1).match(/S*(s)?$/))[1] ? m: j.input.length - j[0].length || c == 1 & amp; & amp;
            m || j.input.length + (j = s.slice(m).match(/^S*/)).input.length;
        }
    }
    return r.join("n");
}
泛泛之交 2017-10-08 2 楼

我们项目中用到的一个。

 <style type="text/css">
* {
word-wrap: break-word;
}
</style>
<table width="100%" border="0" cellpadding="3" cellspacing="1" style="border:1px solid #CEDFF5;" bgcolor="#DFE8F6">
<tr bgcolor="#FFFFFF">
<td align="center" nowrap width="300">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="word-break:break-word,white-space: -moz-pre-wrap;table-layout:fixed;">
<tr><td>BEHxyJHptKZ4GsvQe2oeyX_lNGwlMNmRENPvGs2qiO_Ej.7yOj7VBPB8AmXzgyGB4betK3ia6h-VERxwlpiQt7KHOLxDuRdNf1nVWV21BQKHDJcA2g_EQNwudk0</td></tr>
</table>
</td>
<td height="30" align="center">1</td>
</tr>
</table>

浮生未歇 2017-09-29 1 楼

我个人所能知道的就是通过下面的方法来解决,但在个别浏览器版本下可能也有问题:

style="word-wrap: break-word; word-break: break-all;"

同样也可以通过前端Javascript的方法解决自动折行的问题,解决代码:

function toBreakWord(aString,intLen){
var strTemp="";
while(aString.length>intLen){
strTemp+=aString.substr(0,intLen)+" ";
aString=aString.substr(intLen,aString.length);
}
strTemp+=" "+aString;
return strTemp;
}
//if your string is not for "createTextNode" function, you should replace ' ' to

解答方案部分来源