CSS Secret Garden: 改行の挿入_html/css_WEB-ITnose

『CSS Secrets』は、@Lea Verou による最新の本で、CSS に関する小さな秘密を説明しています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

CSS を介して改行を挿入する必要がある状況は、通常、以下の図に示すようにリスト定義で発生しますが、

は他の状況でも発生します。視覚的に必要なのは数行の名前と値のペアだけの場合でも、適切なセマンティック マークアップを使用するため、多くの場合定義リストを使用します。たとえば、次の HTML を見てください:

<dl>    <dt>Name:</dt>    <dd>Lea Verou</dd>    <dt>Email:</dt>    <dd>lea@verou.me</dd>    <dt>Location:</dt>    <dd>Earth</dd></dl>

必要なもの 視覚効果上の写真のようなシンプルなスタイルです。通常、最初のステップは次のような基本的な CSS を適用することです:

dd {    margin: 0;    font-weight: bold;}

ただし、

と

は次のようなものになります:

name と Each value は次のようになります。独自のライン。次に試みるステップは、通常、

、

の表示プロパティの値を変更することです。レイアウトが無計画でわかりにくくなることが多いため、少し絶望的になります。ただし、このような効果が得られることはよくあります。

気が狂い始めたり、CSS について文句を言ったり、焦点を変えたり HTML を変更したりすることを諦めたりする前に、正気を保ってコードをクリーンに保つ方法はあるでしょうか?

解決策

基本的に、すべての

の終わりに改行文字を追加するだけです。これらの表現力豊かなタグを気にしない場合は、次のように
要素を直接使用して完成させることができます。 , それで終わります。もちろん、これは保守性の点で良い習慣ではなく、HTML タグも肥大化します。生成されたコンテンツを使用して改行を追加し、
要素のようなものがあれば、問題は解決されます。でもそれはできないですよね？試してみてもいいですか～？

実際、Unicode には改行に相当するエスケープ文字 0x000A があります。 CSSでは「」と書くことができます。

理想情况下，我们希望针对最后一个

，在

之前的，只针对它添加换行，而不是所有的

后边都添加换行。但是，就CSS选择器当前的状态来看，这是不可能的，因为它们不可以在DOM树中直接找到那个元素。我们需要想另一个方法。一个想法是尝试在

之前添加换行，而不是在

之后。

dt::before {    content: '\A';    white-space: pre;}

但是，这会导致第一行是空白的，因为选择器也会应用在第一个

上。为了解决这种情况，我们可以尝试使用任何如下的选择器，而不仅是 dt ：

• dt:not(:first-child)
• dt ~ dt
• dd + dt

我们使用最后一个选择器，因为它在多个

有相同的值时也可以，不像前面两个选择器在这种情况下会出错。我们还要想办法把多个

分开，除非这多个值已经使用空格分隔了（这在某些情况下是没有问题的，但不是所有情况都是这样）。理想情况下，我们希望能够告诉浏览器“在前边还有

标签的每个

标签之前添加一个逗号（也就是说除了第一个

标签，其它的

标签都在前面添加一个逗号）”，但是同样，对于今天的CSS选择器是不可能的。所以，我们必须在每个

前添加逗号。这是我们最终的CSS：

dd + dt::before {    content: '\A';    white-space: pre;}dd + dd::before {    content: ', ';    font-weight: normal;}

效果如下：

记住，如果你的HTML标签中，多个连续的

之间包含（未注释掉的）空格，逗号之前都会有空格。有很多方法可以解决这个问题，但是都不是完美的。例如，负外边距：

dd + dd::before {    content: ', ';    margin-left: -.25em;    font-weight: normal;}

这是可行的，但是相当站不住脚。如果你的内容显示的是不同的字体，带有不同的度量，空格可能会比 0.25em 大一些或小一点，这样结果看起来可能就有点过。但是，对于大多数的字体，它们的差异是可以忽略不计的。