Как установить высоту div в соответствии с содержимым
Мне нужно отобразить набор текстовых символов в нескольких строках, каждый в другом элементе div. Когда я пробую это, я получаю, что высота div больше высоты текста. Я подготовила пример чтобы продемонстрировать это. Как изменить стиль, чтобы высота div соответствовала высоте текста?
function showText() {
const codePoint1 = 0x1F031;
const codePoint2 = 0x1F032;
const codePoint3 = 0x1F033;
document.getElementById("div1").textContent = String.fromCodePoint(codePoint1);
document.getElementById("div2").textContent = String.fromCodePoint(codePoint2);
document.getElementById("div3").textContent = "abc"
// String.fromCodePoint(codePoint3);
}
showText();.divText {
border: solid;
font-size: 50px;
width: 70px;
height: 50px;
}<div id = "div1" class = "divText"></div>
<div id = "div2" class = "divText"></div>
<div id = "div3" class = "divText"></div>Если вы имеете в виду, что над/под текстом нет места, то это возможно, но не рекомендуется. Пространство используется по какой-то причине (см. восходящие/нисходящие элементы), чтобы сделать многострочный текст читабельным и визуально привлекательным. Вы можете настроить line-height, но это очень негибко и зависит от шрифта. Кроме того, пробел может находиться в глифе символа, и его невозможно будет удалить. - НАПРИМЕР - codepen.io/Paulie-D/pen/ExzNaOX
Если вы не установите height, высота div будет высотой текста. Если вы выделите символы, вы увидите, что пробел не добавлен, просто символы содержат пробел.
@Cédric: во-первых, спасибо за редактирование моего текста. Во-вторых, если удалить «height: 50px;» в css под текстовым содержимым будет дополнительное пространство.
@ Paulie_D: если не будет предложено другое решение, я буду использовать высоту строки. Проблема в том, что разные div частично перекрываются. Я добавляю addEventListener при нажатии на каждый элемент div, и перекрытие не позволяет правильно определить зону щелчка.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Мне кажется, что символы, которые вы пытаетесь добавить, занимают большую высоту строки, поэтому вы можете просто изменить и настроить свойство «line-height», чтобы достичь желаемого результата.
чтобы было понятно, ваш div на самом деле соответствует высоте ваших элементов, просто ваши элементы имеют пустые промежутки сверху и снизу, это не проблема интервала, а скорее самого элемента (или символа).
Элемент div автоматически принимает высоту и ширину своих дочерних элементов, вы также можете установить height: fit-content вручную, что делает то же самое, вы также можете сделать то же самое с шириной.
Я не использовал «высоту строки» в этом примере jsfiddle. Символы, которые я добавил в элементы div, представляют собой простой текст, например «abc». Использование «height: fit-content» не помогает.
@ eug100 Третий добавленный вами div - это abc, первые два - это символы, такие как это, вы сами не использовали высоту строки, но все символы изначально имеют некоторую высоту строки, вы можете изменить это, например пример используйте line-height: 0.5 и посмотрите результат.
@ Саджад Остадебрахим: спасибо, я думаю, ты прав. Сейчас я действительно использую высоту строки.
Я добавил ваш пример в вопрос (причина: Что-то на моем веб-сайте или проекте не работает. Могу ли я просто вставить ссылку на это?).