CSS переопределить высоту строки при переносе слов

Question

У меня есть список ссылок, привязанных к довольно узкому полю; достаточно узкий, чтобы некоторые ссылки можно было обернуть.

line-height установлен на 30px, что хорошо для неразвитых ссылок; однако для ссылки, текст которой является достаточно длинным, чтобы вызвать перенос строки, здесь также применяется высота строки 30px, поэтому создается впечатление, что существует 2 ссылки, а не просто продолжение текста ссылки.

Мне бы хотелось, чтобы (без js или промежуточного программного обеспечения, вычисляющего длину строки), чтобы текст обернутой ссылки имел высоту строки 10 пикселей или около того, чтобы создать визуальное впечатление продолжения, а не разделения.

Answer 1

Line-height должен устанавливать интервал между строками (особенно, когда они переносятся). Вероятно, вы ищете margin на li объекте. Если вы установите line-height на меньшее значение, которое вы хотите при переносе строк, и установите margin на значение, которое вы хотите установить между элементами, вам будет хорошо идти.

Посмотрите, делает ли это то, что вы хотите:

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

Answer 2

Я бы сделал это таким образом

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

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

1006 *

Или вы можете установить псевдоэлемент "первой строки", как в в этом примере

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