使用css应用文本换行

Question

我尝试使用以下方法将文本换行应用于td（表格数据）：

.gvUpdatesStyle .updateSummary {width:200px; white-space:normal;}

但它没有用，而且td​​超过200px。

编辑：这是html，但请注意，这是由GridView生成的：

<table cellspacing="0" border="1" style="border-collapse:collapse;" id="ContentPlaceHolder1_gvUpdates" rules="all" class="marginLeftRightBottom10px center gvUpdatesStyle">
    <tbody><tr>
        <th scope="col">Update Id</th><th scope="col">Date</th><th scope="col">Text</th>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$0')">17</a></td><td>29 ta' Awissu</td><td class="updateSummary">fgdfgdfgdfgfd</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$1')">18</a></td><td>29 ta' Awissu</td><td class="updateSummary">dfgdfgdfgfdg</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$2')">4</a></td><td>27 ta' Awissu</td><td class="updateSummary">dsfsdfdsfdfgfdgfdgfd</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$3')">5</a></td><td>27 ta' Awissu</td><td class="updateSummary">jkljl</td>
    </tr><tr>
        <td><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvUpdates','Select$4')">0</a></td><td>15 ta' Awissu</td><td class="updateSummary">testlol</td>
    </tr>
</tbody></table>

编辑：通过进一步的测试，我发现它实际上并不适用于很长的输入，并且如此显示：

Answer 1

试试这个：

.gvUpdatesStyle .updateSummary td {width:200px; white-space:normal;} 

这明确将样式应用于与您的类选择器td和.gvUpdatesStyle

匹配的.updateSummary元素

编辑：根据您新发布的HTML，您似乎只是过度选择。这对我有用

.gvUpdatesStyle td {width:200px; word-wrap:break-word; }

虽然现在我尝试了它，但它也适用于您之前发布的其他选择器：

.gvUpdatesStyle .updateSummary {width:200px; word-wrap:break-word; }

编辑＃42： 这适用于chrome，firefox 和 IE

.gvUpdatesStyle .updateSummary { width:200px; max-width:200px; word-wrap:break-word; }

Answer 2

元素文本中没有空格，因此不会显示换行的机会。

请参阅此处的空白处理：http://www.w3.org/TR/CSS2/text.html#propdef-white-space

编辑：请注意此示例页面中的相同内容：http://jsbin.com/equday/edit#preview其中文本超出容器的边框。