html - 在 Chrome 中，当字符串包含 & 时，它的表格单元格会过大

Question

我在表 td 中显示了一个 URL 列表(从数据库中获取)。 td 元素宽度是固定的。每个 URL 都显示在这个 td 中的 li 中。

在 Firefox 和 IE 中，URL 的字符无关紧要。当 URL 长于 div 宽度时，浏览器将其剪切并显示在下一行中。这是预期的行为。

Chrome 做到了，但并非在所有情况下都如此。当 URL 有一长串由 '&' 连接的字符时，它不会剪切它，扩展 div 宽度。这种 URL 的示例:

http://www.test.com/cgi-bin/test/test/test.cgi?lang=e&extra=&year=2009&month=09&day=25&vol=13&no=39&gn=5959&header=1&part=0&df=1&nt=gn&acurrentpage=12&agree=1&newfile=1

问题是什么？

我会尝试在这里放一些 css 代码(有很多，我希望我写下与问题相关的所有内容)，以便您考虑:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, select, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
#contentInner {
    background: none repeat scroll 0 0 #40545F;
    margin-bottom: 30px;
    width: 988px;
}
element.style {
    display: table;
}
.ventana table {
    color: #40545F;
    font-size: 12px;
    margin: 8px;
    width: 885px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.ventana td {
    background: none repeat scroll 0 0 #E0E4EA;
    border-bottom: 1px solid #FFFFFF;
    padding: 8px;
    vertical-align: top;
}
ul {
    list-style: none outside none;
}
p, li {
    font-size: 1.1em;
    line-height: 1.3em;
}

我的表格位于一个名为“contentInner”的 div 中，它的宽度是固定的。

这是我的 HTML:

<div id="contentWrapper">       

            <table class="detectionTable" cellspacing="0" cellpadding="0">
                    <tr>
                        <th colspan="2">URLs found</th>
                    </tr>
                    <c:if test="${not empty URLs}">
                        <tr>
                            <td class="col21">URLs</td>
                            <td class="col22">
                                <ul>
                                <li>http://test.eu/test/test.do?uri=OJL.PDF</li>
                                <li>http://www.test.com/cgi-bin/test/test/test.cgi?lang=e&extra=&year=2009&month=09&day=25&vol=13&no=39&gn=5959&header=1&part=0&df=1&nt=gn&acurrentpage=12&agree=1&newfile=1</li>
                                </ul>                                                               
                            </td>
                        </tr>
                    </c:if> 
            </table>
</div>

Answer 1

尝试

word-wrap: break-word;

在你的 CSS 中

http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap