Сделайте тег одинаковой максимальной ширины независимо от заглавных букв текста внутри

ProgramBox

Сделайте тег одинаковой максимальной ширины независимо от заглавных букв текста внутри

Post author:admin
Запись опубликована:12 января, 2022
Post category:Вопросы по программированию

#html #css #fonts

Вопрос:

Я пытаюсь отобразить серию заголовков размером от 60 символов до 160 или около того, и заглавные буквы различаются, некоторые из них полностью заглавные, некоторые наполовину заглавные. Когда он в основном строчный, все 160 символов текста вписываются в нужную мне ширину, но когда он начинает набирать больше заглавных букв (они должны быть шире), он начинает перетекать.

Есть ли способ использовать привлекательный фиксированный шрифт witdh (ширина верхнего и нижнего регистра тоже одинакова), или динамически сжимать текст по размеру, или иным образом распознавать, сколько места займет текст на стороне сервера, и динамически обрезать конец? Или у вас, ребята, есть лучшее решение?

Ответ №1:

Контролируйте переполнение

Настоящая хитрость заключается в том, чтобы просто установить ограничение на размер текстового поля и убедиться, что проблем с переполнением нет. Вы можете использовать overflow: hidden, чтобы позаботиться об этом, и display: заблокируйте элемент, чтобы придать ему точные размеры, которые вам нужны.

Моноширинное пространство является необязательным

Да, вы можете использовать моноширинный шрифт.. есть только несколько вариантов на выбор, если вам нужно кроссбраузерное решение. Вы также можете использовать шрифт переменной ширины.. монопространство просто поможет вам получить согласованность с проблемой капитализации, которую вы описали. Использование моноширинного шрифта поможет вам выбрать хорошую ширину, которая будет работать для разных длин текста. В приведенном ниже примере я произвольно выбрал ширину 250 пикселей и набирал строки до тех пор, пока они не превысили предел, просто для иллюстрации.

Высота линий и поля

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

Примечание: Здесь я использовал h3, потому что текст повторяется много раз по всей странице. В целом, лучше использовать более низкий уровень заголовка для более распространенного текста (просто семантический выбор). Использование h1 будет работать точно так же..

 <html>
<head>
<title>h1 stackoverflow question</title>
<style type="text/css">

* { margin:0; padding:0 }

h3 { 
    display: block;
    width: 250px;
    height: 20px;
    margin-bottom: 5px;
    overflow: hidden;
    font-family: Courier, Lucidatypewriter, monospace;
    font: normal 20px/20px Courier;
    border: 1px solid red;
}

</style>
</head>
<body>

<h3>Hello, World</h3>
<h3>Lorem Ipsum dolor sit Amet</h3>
<h3>Adipiscing Lorem dolor sit lorem ipsum</h3>
<h3>amp;quot;Camp;quot; is for Cookie, that's good enough for lorem ipsum</h3>
<h3>Oh, it's a lorem ipsum dolor sit amet.  Adipiscing elit.</h3>

</body>
</html>

Ответ №2:

Когда вы говорите «динамически обрезать конец», я ошибаюсь, предполагая, что правило CSS, подобное:

 h1 {
    width: 400px; /* or whatever width */
    overflow: hidden;
}

«отрежьте конец», как вы хотите?

Ответ №3:

Вы также можете попробовать решение с многоточием. Усеките текст на максимальную ширину и примените многоточие. Что-то вроде:

Мой титул слишком длинный для этого…

CSS3 имеет переполнение текста: вы можете использовать многоточие, но оно не поддерживается в Firefox.

Хеджер Ван нашел обходной путь, который я использовал пару раз. Довольно удобно.

Ответ №4:

Вы можете исправить ширину и скрыть переполнение, style="width: Xpx; overflow: hidden;"

Это ограничит ширину и отрежет конец, если он слишком широкий.

Ответ №5:

MrZebra права в том, как скрыть переполнение, но если вы хотите использовать привлекательный шрифт фиксированной ширины, вы можете установить его с помощью семейства шрифтов CSS, просто не забудьте предоставить ему запасной вариант для людей без шрифта.

Вы также можете использовать CSS для принудительного использования заглавных букв с помощью «преобразования текста», если хотите (хотя, судя по вашему чтению, это не ваше желание).

вариант шрифта:заглавные буквы тоже могут сработать.

Ответ №6:

Вы можете попробовать использовать javascript для программного тестирования, чтобы увидеть ширину шрифта, и если он слишком большой, уменьшите его на шаг и повторите попытку. Вместо того, чтобы проверять ширину, посмотрите, не превышает ли высота элемента более одной строки (измеряется в ems, так как вы будете изменять размер шрифта примерно).

 var fontSize = "200%";  // your regular heading font size
var h1 = document.getElementById("myHeading");
while (h1.offsetHeight > oneLine) {
    fontSize *= (parseInt(fontSize) - 5)   "%";
    h1.style.fontSize = fontSize;
}

вам придется самому разобраться в этой части «oneLine», извините.

Ответ №7:

Вместо того, чтобы пытаться ограничить высоту вашего <h1>, я бы скорректировал ваш CSS, чтобы сделать ваш сайт более гибким — в конце концов, вы не хотите, чтобы ваш сайт выглядел сломанным, если пользователь увеличит размер текста.

Попробуйте установить высоту h1 в ems, а не в пикселях. Если вы добавите это в свой CSS:

 body {
    font:62.5%/140% Courier, Lucidatypewriter, monospace;
}

Это составит 1em = 10 пикселей, поэтому вы можете установить высоту вашего заголовка на:

 h1, h3 {
    ....
    height:2em;
    ....
}

Надеюсь, это поможет.

Метки: Сделайте тег одинаковой максимальной ширины независимо от заглавных букв текста внутри