Как изменить размер div пропорционально тексту внутри?

Предположим, что у нас есть элемент div с нулевым заполнением, абсолютное позиционирование, предопределенная ширина (в пикселях) и некоторый простой текст внутри.Как изменить размер div пропорционально тексту внутри?

Теперь мы увеличиваем свойство font-size CSS текста на один пиксель. По какой мере я должен увеличить ширину div div так, чтобы его макет оставался тем же (т. Е. Ни слова не перескакивают с одной строки на другую из-за непропорционально увеличенной ширины)?

В случае это не возможно с CSS размера шрифта, установленного в пикселях, она должна быть установлена в пт или Em, и почему?

источник

2009-04-21 dpq

Вы хотите указать ширину вашего div и размер шрифта в ems. Вот пример, в котором изменение размера шрифта в пикселях приводит к тому, DIV и текст, чтобы изменить размер пропорционально без изменения макета:

<html> 
    <head> 
    <title>Proportional Resize Example</title> 
    <style> 
     body {font-size:10px} 
     div { 
     position:absolute; 
     top:100px; 
     left:100px; 
     width:20em; 
     font-size:2em; 
     padding:0; 
     background:green} 
    </style> 
    <head> 
<body> 
    <div> 
    This text will resize proportionally. 
    This text will resize proportionally. 
    This text will resize proportionally. 
    </div> 
</body> 
</html>

В этом примере, если изменить размер шрифта элемента тела, все будет изменять размер пропорционально , Это связано с тем, что ems, которые мы использовали для указания размеров в div, измеряются относительно размера шрифта в элементе body. Увеличение размера шрифта элемента body делает ems больше в div для ширины и размера шрифта.

источник

2009-04-21 19:44:40 vamin

Для расширяемости в этом случае, вероятно, лучше использовать идентификатор вместо переопределения div. Это должно сделать это. –

Scriptaculous имеет это как встроенный эффект. Попробуйте.

new Effect.Scale('id_of_element', percent, [options]);

источник

2009-04-21 17:45:32

Я никогда не видел ничего подобного в CSS или даже в качестве веб-приложения. Тем не менее, ответ на ваш второй вопрос, который лучше подходит для шрифтов, em или pt, равен em. Зачем? потому что em используется для измерения размеров шрифта и пропорционален по дизайну: 1em - это 100% от размера шрифта вашего текстового шрифта. 1.1em - 110%, 0,8 метра - 80% и т. Д.

источник

2009-04-21 17:54:01 CLaRGe

Как сказал CLaRGe, em - это измерение, основанное на размере шрифта родительского элемента, поэтому его естественный выбор можно использовать, когда вы хотите, чтобы размер элемента был пропорционален размеру шрифта. Если вы измеряете размер шрифта в пикселях, то em - ваш размер шрифта в пикселях, например. 200px, когда ваш размер шрифта 10px означает 20em.

источник

2009-04-21 17:56:56 Skilldrick

CSS сам по себе является довольно статичным, а также div.

Вы не можете сделать свойства одного элемента зависимыми от свойств какого-либо другого. Даже для одного элемента вы не можете синхронизировать некоторые его свойства с другими.

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

Единственный способ добавить эту динамику - использовать языки скриптов, такие как JavaScript.

источник

2009-04-21 18:15:18 User

Как изменить размер div пропорционально тексту внутри?

ответ

Смежные вопросы