Question

CSS样式高手进！有一棘手问题

我需要在一个弹出框中显示一条记录的详细信息，由于记录中有一个“说明”字段，这个字段中的文字较多，所以会出现顶开表格的边框现象，我在显示说明的表格<td>中加了一个<div>标记，并且设置当超过高度的时候显示垂值滚动条，以下是这个div的样式：
.PopupTdDescription
{
height:70px;
word-wrap:break-word;
overflow-y:auto;
}
但奇怪的问题出现了，只要显示中文，一切正常，但只要是英文，会不起作用依然会顶开边框，非常难看，请教高手解决，感谢感谢！
问题可见图示

Answer 1

出现这个原因是因为自动换行中判断的原则问题。

中文字符是2个字符一个字，所以，只要是到了限制的宽度就会自己换行；
英文字符中，判断换行的标准是“-”（连字符，即减号）和空格。

由你的内容可以看到，中文那边，你是有空格的，但是英文那部分却是一整串的字符，所以无法判断换行。

其实，你有两个办法处理这个问题：
1、实际应用中，是不会出现你英文中的情况的。所以，不修改也可以。（你可以加几个空格，或者复制一段完整的英文内容试试就清楚了。）

2、采用强制换行。下面是代码：

div{word-break:break-all;}

A，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

B，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

Answer 2

加个word-break:break-all;给它一个宽度width试试。

Answer 3

word-wrap:break-word;

这个句子的意思不知道你是否明白，它的意思是按单词分行。
然后每个中文字都被认为是一个单词，所以连续的中文字之间总是能被换行。
再然后连续的英文字母被认为是一个单词，所以连续的英文字母不会被切成两半进行换行。

你可以试试 word-wrap:break-all; 此时总是换行。

不过在实际应用中基本用break-word，因为单词被切成两半不是很爽。然后正常的英文句子中，单词最多也就10来个字母，单词之间有空白，基本上换行都能正常进行（格子实在太窄就是应用设计问题了，没考虑周全）