0

テーブルtd内の（データベースから取得した）URLのリストを表示しています。td要素の幅は固定されています。そして、各URLは、このtd内にあるli内に表示されます。

FirefoxとIEでは、URLの文字は関係ありません。URLがdiv幅より長い場合、ブラウザはそれを切り取り、次の行に表示します。これは予想される動作です。

Chromeはそれを実現しますが、すべての場合に当てはまるわけではありません。URLに「＆」で結合された長い文字列がある場合、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を読みやすくするために、「＆amp;」の後など、特定のポイントでのみブレークを実行する必要があります。（Firefoxの最新バージョンはデフォルトで壊れます）。これを実現するには、改行を許可するタグまたは特殊文字を挿入する必要があります。これはやや複雑ですが、IE 6などの古いバージョンのIEを無視できる場合は、ゼロ幅スペース文字を使用するとうまくいきます。<wbr><a class="wbr"></a>（IE 6が関連している場合は、スタイルシートのタグのようなトリックが必要な.wbr:after { content: "\00200B"; }ので、汚れます。

例として、最初に最小限のケースで問題を示し、次に単純な「どこでも壊す」方法、最後に改行許可を追加する方法を示します。

<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>

（ HTMLソースコードがわかりにくくなる場合でも、&amp;プレーンの代わりに使用するの&が正しい方法です。ただし、これは原則の問題であり、目前の問題には影響しません。）

于 2012-12-19T12:06:15.937 に答える