Отрегулируйте размер по высоте (по вертикали)

-1

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

Чтобы получить представление о проблеме, смотрите здесь http://sandbox.littlegraffyx.com/bible/

Вы попробуйте ввести стихи в нижнем текстовом поле слева, используя формат GEN 1:1 для «Бытие 1: 1»

Моя проблема, когда я пытаюсь для отображения длинных стихов они усекаются. Мне нужно изменить размер, исходя из того, как долго текущий текст. Есть ли какой-нибудь css, который можно применить на основе размера текстового поля?

источник

2012-06-16 Wayne

вы хотели бы иметь код JQuery? – shahbaz

Проблема заключается в многих, но для начала вы используете идентификаторы на элементах, где вы собираетесь иметь классы (идентификатор всегда должен быть уникальным для каждого элемента, никогда не повторяться). Кроме того, вы должны использовать модель окна CSS в свою пользу, а не бороться с ней. – jcolebrand

Спасибо .. На самом деле я только начинаю начинать, и у меня действительно нет идеи, что я использую. просто то, что я нашел в сети. для модели коробки. вы имеете в виду это? – Wayne

Как указано в комментариях, невозможно масштабировать текст в зависимости от высоты его содержащего элемента, используя чистый CSS. Но вот небольшой сценарий jQuery, который я использовал в прошлом, когда мне нужно было добиться того, чего вы хотите. Он также регулирует размер текста, когда пользователь изменяет размер окна браузера.

HTML:

<p class="quote"> 
Really long text goes here... 
</p>

CSS:

.quote { 
    // The largest size to display text at. 
    font-size: 36px; 
}

JS:

$(window).bind('resize',function(e){ 
    scaleQuote(); 
}); 

function scaleQuote(){  
    var quote = $('.quote'); 
    var winH = $(window).height(); 

    // Reset font size. 
    quote.css('font-size', ''); 

    // If quote is larger than viewport, reduce font-size until it fits. 
    while (winH < (quote.height())){ 
     var fontSize = parseInt(quote.css('font-size'), 10); 
     quote.css('font-size', fontSize-1+'px'); 
    } 
} 

scaleQuote();

Демо: http://jsfiddle.net/eCBmc/2/

источник

2012-06-16 07:09:32

Мне любопытно: почему downvote? Это потому, что я предоставил решение JS, или мой ответ недостаточен в каком-то отношении? Комментарий позволит мне решить любые проблемы с моим ответом. –

Это замечательно. Это именно то, что мне нужно. К сожалению, я не могу применить его в своем проекте. Можете ли вы проверить, что не так? Вот моя тестовая страница. http://sandbox.littlegraffyx.com/bible/test.html – Wayne

Я забыл упомянуть. попробуйте ввести «gen 2:19» в нижнем левом текстовом поле, чтобы показать достаточно текстового содержимого. – Wayne

Вы можете попробовать что-то вроде этого. Он установит поле ввода на 10 символов, и если оно больше, оно увеличит его размер. http://jsfiddle.net/4qjjf/1/

<html> 
<body> 
<textarea cols="10" rows="1" id="shit" 
onkeyup="this.cols=this.value.length>10?this.value.length:10;"></textarea> 
</body> 
</html>

источник

2012-06-16 07:14:11 Anonymous

OP хочет изменить размер большого белого текста (стихи), а не ввода формы. –

Отрегулируйте размер по высоте (по вертикали)

ответ

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