0

次の構造でワード ブレーク/ワード ラップを許可する必要があります。

<ul>
    <li><strong>Forename</strong><span>forename value</span></li>
    <li><strong>Forename</strong><span>forename value</span></li>
    <li><strong>Forename</strong><span>forename value</span></li>
<ul>

li の数が異なる可能性があるため、スパンまたは li に幅を固定することはできません。li をtable-cellとして表示すると、画像に示されているように、スパン コンテンツを単語で区切るのに役立ちます。

ここに画像の説明を入力

  • IE7 を table-cell の動作/理解させる方法はありますか?

編集 ：

私の元の問題は、下の画像に示すような表示を実現しようとしていることですが、単語を壊すのではなく、長く途切れていない文字列が入力として与えられた場合、コンテンツが右側で切り取られてしまうということです。

  1. span が block または inline-block にされない限り、なぜword-break:break-allが有効にならないのか疑問に思っています。

  2. span を inline-block にしても、次の問題はどうやって連続行に後続のコンテンツを流すか?

添付画像： http: //i.stack.imgur.com/1gB92.png

ご意見はありますか？

4

2 に答える 2

0

JSBin で私のデモを試すことができます

各cssのwhite-space属性をチェックして、 の値が-ではなく、改行を防止することを確認してください。spanwhite-spacenormalnowrap

于 2013-01-17T12:53:35.123 に答える
0

あなたが持っている 3 つのテキストブロックのそれぞれに、3 行以上のテキストが含まれていない可能性があるということですか? もしそうなら：

<li style="height:100%;">
    <div style="width:100%;height:100%;overflow:hidden;">
         <strong>Forename</strong>
         <span>forename value</span>
    </div>
</li>

このようにして、存在する可能性のある 4 番目のテキスト行が表示されなくなります。

IE7 と互換性のある Web サイトを作成するには多くの時間がかかり、IE7 の使用率は統計で見た約 5% であるため、IE7 はもうサポートしていません。

訪問者が ie7 を使用している場合、2008 年末から更新されていないブラウザーを使用しているというメッセージが表示された場合、ウィンドウがポップされ、脆弱になります。そして、新しいバージョンに更新するようにアドバイスします。私たち全員がそれを行えば、IE7 はすぐになくなります。

于 2013-01-16T10:17:00.180 に答える