0

我在表 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>
4

2 回答 2

3

尝试

word-wrap: break-word;

在你的 CSS

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

于 2012-12-19T11:08:15.947 回答
1

该问题是由浏览器中不同的换行行为引起的。这是一个真正的混乱，但它可以通过不同的方式来控制。最简单的方法是word-wrap: break-word@yunzen 建议的。但这意味着任何地方都允许休息。

为了文本中 URL 的可读性，中断应该只在某些点进行，例如在“&”之后 （默认情况下，现代版本的 Firefox 会中断）。为此，您需要插入允许换行的标签或特殊字符。这有点复杂，但如果您可以忽略 IE 6 等旧 IE 版本，则使用零宽度空格字符效果很好。（如果 IE 6 是相关的，你需要一个技巧，比如<wbr><a class="wbr"></a>带有样式表的标签.wbr:after { content: "\00200B"; }，所以它会变脏。

示例，首先显示最小情况下的问题，然后是简单的“break any”方法，最后是添加换行权限的方法：

<style>
div { border: solid; width: 25em;  }
</style>
<div>
http://www.test.com/cgi-bin/test/test/test.cgi?lang=e&amp;extra=&amp;year=2009&amp;month=09&amp;day=25&amp;vol=13&amp;no=39&amp;gn=5959&amp;header=1&amp;part=0&amp;df=1&amp;nt=gn&amp;acurrentpage=12&amp;agree=1&amp;newfile=1
</div>
<hr>
With word-wrap: break-word:
<div style="word-wrap: break-word;">
http://www.test.com/cgi-bin/test/test/test.cgi?lang=e&amp;extra=&amp;year=2009&amp;month=09&amp;day=25&amp;vol=13&amp;no=39&amp;gn=5959&amp;header=1&amp;part=0&amp;df=1&amp;nt=gn&amp;acurrentpage=12&amp;agree=1&amp;newfile=1
</div>
<hr>
With ZWSP:
<div>
http://www.test.com/cgi-bin/test/test/test.cgi?lang=e&amp;&#x200b;extra=&amp;&#x200b;year=2009&amp;&#x200b;month=09&amp;&#x200b;day=25&amp;&#x200b;vol=13&amp;&#x200b;no=39&amp;&#x200b;gn=5959&amp;&#x200b;header=1&amp;&#x200b;part=0&amp;&#x200b;df=1&amp;&#x200b;nt=gn&amp;&#x200b;acurrentpage=12&amp;&#x200b;agree=1&amp;&#x200b;newfile=1
</div>

（使用&amp;而不是plain&是正确的做法，即使它会掩盖HTML 源代码。但这只是原则问题，不会影响手头的问题。）

于 2012-12-19T12:06:15.937 回答