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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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;
}