3

次のコードを必要とする仕様に取り組んでいます。

<dl>
    <dt>Key</dt>
    <dd>012345678901234567890123456789</dd>
</dl>

...次のようにレンダリングします。

Key  01234567890123456
7890123456789

DD の内容にスペースが含まれている場合は問題なく動作しますが、スペースがない場合は失敗します。インクルードdd { word-wrap: break-word; }してもまったく機能せず、次のような結果になります。

Key
0123456789012345678901
23456789

私の現在のCSSは次のようになります。

dl {
    margin: 1em 0;
    padding: 0;
    width: 250px;
}

dt {
    float: left;
    clear: left;
    margin: 0;
    padding: 0 .5em 0 0;
    font-weight: bold;
}

dd {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

dd:after {
    content: ".";
    visibility: hidden;
    clear: left;
}

HTML と CSS のみを使用して意図した効果を得るにはどうすればよいですか?

私のニーズを明確にするために、ここにもデモがあります: http://cdpn.io/Ezujp (警告、CSS ではなく SCSS が含まれていますが、それほど複雑ではないので、精神的に翻訳するのは簡単なはずです) .

私はhttps://stackoverflow.com/a/1577397/771948を読み、学び、利用しました。意図したソリューションに近づくことができましたが、すべてのニーズを満たしていませんでした。

私はDLを使用する必要はありません。クロスブラウザー (IE7+) の方法で意図した効果を達成する別の方法がある場合は、意味的に正しく、ハックが多すぎない限り、代わりにそれを使用します。

私は試してみdt { display: run-in; }ましたが、それは Firefox では機能しません。それでも、現在のフォームとは何の違いもありませんでした (dd { word-wrap: break-word }含まれている場合、dd は次の行で始まり、現在と同じようにラップされます) 。 .

編集：SOをもう少し検索した後、私はこの答えを見つけました：https://stackoverflow.com/a/3284425/771948

DL よりもスタイルを設定しやすいいくつかの代替オプションが提示されましたが、セマンティクスについてはわかりません。それにもかかわらず、次の方法で構造化された ul を使用して、実用的なプロトタイプをセットアップしました。

<ul>
    <li><strong>Key</strong>012345678901234567890123456789</li>
</ul>

...次のようにスタイルすると、次のようになります。

ul {
    outline: 1px solid #F00;
    margin: 1em 0;
    padding: 0;
    width: 250px;
}

li {
    width: 100%;
    outline: 1px solid #00F;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

strong {
    white-space: nowrap;
}

...意図したとおりにレンダリングされますが、これが意味的に正しいかどうか、スクリーンリーダーにアクセスできるかどうかはわかりません。このシナリオで私に役立つアドバイスはありますか?

前もって感謝します。他に何もないとしても、これが同様の状況にある他の人にとって役立つリソースであることを願っています（同様の質問に対する他の2つのSO回答へのリンクがあるため）。

4

1 に答える 1

7

word-break: break-allCSS3テキストドラフトによると、 （dd要素で）使用できます。名前は誤称です。設定は、コンテンツ内の任意の文字列がいつでも壊れている可能性があることを宣言しています。（これはword-wrap: break-word、同様に「無料」の改行を許可する、とは対照的ですが、オーバーフローを回避するために絶対に必要な場合、つまり緊急の区切りとしてのみです。）

ただし、FirefoxとIEでのみサポートされています。ブラウザのカバレッジを向上させるには、各桁の後にゼロ幅スペースやタグを挿入する必要があります<wbr>（ただし、これはクライアント側のスクリプトで行うことができます）。どちらのオプションにも長所と短所があります。

于 2013-03-04T19:00:29.777 に答える