Сделайте тег <h1> равной той же максимальной ширине, независимо от капитализации текста внутри

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

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

7 ответов

Управление переполнением

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

Моноширинка необязательна

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

Линейные высоты и поля

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

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

<title>h1 stackoverflow question</title>



<h3>Hello, World</h3>
<h3>Lorem Ipsum dolor sit Amet</h3>
<h3>Adipiscing Lorem dolor sit lorem ipsum</h3>
<h3>"C" is for Cookie, that good enough for lorem ipsum</h3>
<h3>Oh, it a lorem ipsum dolor sit amet. Adipiscing elit.</h3>


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

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

будет "вырезать конец", как вы хотите?


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

Мой заголовок слишком длинный для этого...

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

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


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

Вы также можете использовать CSS для обеспечения капитализации с помощью "text-transform", если хотите (хотя из вашего чтения это не ваше желание).

font-variant: small-caps тоже может работать.


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

Это будет ограничивать ширину и обрезать конец, если он слишком широк.


Вместо того, чтобы пытаться ограничить высоту вашего

Я бы скорректировал ваш CSS, чтобы сделать ваш сайт более ликвидным - в дальнейшем вы не хотите, чтобы ваш сайт выглядел сломанным, если пользователь увеличивает свой размер текста.

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

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

Он сделает 1em = 10px, поэтому вы можете установить высоту курса:

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

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


Вы можете попробовать использовать 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" для вас, извините.

licensed under cc by-sa 3.0 with attribution.