web-dev-qa-db-ja.com

CSSがワードラップで行の高さを上書きする

かなり狭いボックスにバインドされたリンクのリストがあります。一部のリンクが折り返すのに十分なほど狭い。

line-heightは30pxに設定されており、ラップされていないリンクには問題ありません。ただし、テキストが行の折り返しを強制するのに十分な長さのリンクには、30pxの行の高さも適用されるため、リンクテキストの続きではなく、2つのリンクがあるかのように見えます。

どういうわけか（jsなしまたはミドルウェアの文字列の長さの計算で）、ラップされたリンクテキストの行の高さが10px程度になるようにして、分離ではなく継続の視覚的な印象を与えたいと思います。

overridingword-wrapcss
27
virtualeyes

Line-heightは、行間の間隔を設定することになっています（特に、折り返す場合）。おそらく探しているのは、marginオブジェクトのliです。 line-heightを、行が折り返されるときに必要な小さい値に設定し、marginを項目間に必要な値に設定した場合、問題ありません。

これがあなたが望むことをするかどうかを見てください：

li {
    padding: 10px 0 0 0;
    margin: 30px 0;
    line-height: 10px;
}
40
TLS

私はそれをします this way

li {
    list-style-position: inside;
    margin: 20px;
}

ul {
    width: 200px;
    border: solid 1px;
}

または、次のように「最初の行」の疑似要素を設定できます この例

li {
   padding: 10px 0 0 0;
    margin: 10px;
    line-height: 30px;
}
li:first-line {
    margin: 10px;
    line-height: 10px;
}
ul {
    width: 200px;
}
5
thepriebe