Подтвердить что ты не робот

Как установить ширину <div> для установки постоянного количества букв в моноширинном шрифте?

Я исследовал какое-то время, пока не нашел решение для CSS, em и ex единицы в этом случае неверны. Я хочу просто поле div, которое точно соответствует моноширинному тексту 80x25. Должен ли я прибегать к решениям Javascript?

Ответ 1

em работает в этом случае, если вы знаете правильные отношения, связанные с вашим шрифтом. Попробуйте использовать следующий HTML-код:

(Опасность заключается в том, что некоторые браузеры настраивают шрифт, который может изменять ширину/высоту шрифта. Для 100% -ной точности вам может потребоваться JavaScript.)

<style type="text/css">
    #text-container {
        border: #f00 solid 1px;
        font: 10px/1.2 Courier, monospace;
        width: 48em;  /* 80 x 0.6 (the width/height ratio of Courier) */
        height: 30em; /* 25 x 1.2 (line-height is 1.2) */
        overflow: hidden;
    }
</style>

<div id="text-container">
00000000001111111111222222222233333333334444444444555555555566666666667777777777
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
12345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>

Ответ 2

Попробуйте использовать блок ch, описанный в спецификации CSS3:

Одинаково для используемой предварительной меры глифа "0" (ZERO, U + 0030), найденного в шрифте, используемом для рендеринга.

Таким образом, width: 80ch указывает ограничение ширины 80 символов.

Ответ 3

Для высоты можно использовать em, но вы также должны установить line-height:

height: 25em; line-height: 1em;

Или с немного большим интервалом:

height: 30em; line-height: 1.2em;

Нет элемента CSS для ширины символа, поэтому я боюсь, что вам нужен Javascipt...

Ответ 4

Ответ Blixt является правильным, но вы также можете сделать это, если это упростит математику:

font-family: Courier; 
font-size: 0.57em;
line-height: 1.2em;
width: 80em; 
height: 30em; /* 1.2 * 25; you could set the line-height at 1em and the box height at 25, 
                 but that would squish things too much */