使用 css 应用文本换行答案

【问题标题】：Applying text-wrap using css使用 css 应用文本换行
【发布时间】：2015-08-19 23:12:58
【问题描述】：

我正在尝试将文本换行应用于 td（表格数据），使用：

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

但它不起作用，td 超过 200 像素。

编辑：这里是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>

编辑：通过进一步测试，我发现它实际上不适用于很长的输入，并且看起来像这样：

【问题讨论】：

能否展示您的 HTML。
请再看一遍...它没有 100% 工作

标签： css asp.net word-wrap

【解决方案1】：

试试这个：

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

这会将样式显式应用于与您的类选择器 .gvUpdatesStyle 和 .updateSummary 匹配的 td 元素

编辑：根据您新发布的 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; }

【讨论】：

奇数。正如@Diodeus 所说，您能否将表格所在的 HTML 粘贴到您的问题中？如果那时我有什么问题，我可以更新我的答案，看看我是否可以帮助你。
我尝试使用自动换行，但我的视觉工作室 css 语法中没有它。你知道为什么吗？上面说我正在使用 css 2.1。
啊，CSS3中引入的。查看 this post 了解如何将 Visual Studio CSS 语法更改为 3.0。很抱歉给你跑路=）
我安装了它，它工作正常，谢谢！即使你在我的智能感知中仍然没有“自动换行”，我确实测试了其他 css 3 功能，例如“边框颜色”并且它们确实出现了。
呵呵，我只测试过 IE（我跛脚，是吧？）。尝试更新的样式。必须添加 max-width 属性

【解决方案2】：

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

在此处查看空白处理：http://www.w3.org/TR/CSS2/text.html#propdef-white-space

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

【讨论】：

我明白了，请问我该怎么做呢？