次のコードを必要とする仕様に取り組んでいます。
<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回答へのリンクがあるため)。