У меня есть контейнер с фиксированной высотой (30 пикселей), но с переменной шириной, отображающий сообщения об ошибках и предупреждения пользователю. Обычно сообщение представляет собой два или три слова и выглядит нормально, но когда отображается более длинное сообщение, оно переходит на две строки и вне контейнера, используемого для отображения сообщения.Измените размер любой длины в соответствии с переменной шириной, контейнером с фиксированной высотой

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

HTML

<body> 
<div class="go-nogo-box"> 
    <div class="go-nogo-container"> 
     <h2 class="go-nogo-status">Error Message!</h2> 
    </div> 
</div>

CSS

.go-nogo-box{ 
width: 80%; 
margin:0 auto 10px auto; 
} 

.go-nogo-container h2{ 
    height: 50%; 
} 

.go-nogo-container{ 
    border-color: #999; 
    border-width: 1px; 
    border-style: solid; 
    clear: both; 
    padding:15px; 
    background-color: #FFFFFF; 
    border-radius: 40px; 
    height: 30px; 
} 
.go-nogo-status{ 
    font-weight: bold; 
    text-align: center; 
    font-size: 32px; 
    font-variant: small-caps; 
    font-family: Arial, Helvetica, sans-serif; 
} 

@media (max-width: 1100px){ 
    .go-nogo-box{ 
     width:100% 
    } 
}

Пожалуйста, проверьте JS скрипку Link, который позволяет выбирать различные сообщения длины (Фактическая программа будет отправлять сообщения back-end).

https://jsfiddle.net/alphabetaparkinglot/4rwb6j56/5/

Я попытался реализации FitText.js, но в то время как я могу заставить его работать нормально для любого сообщения, он не обрабатывает сообщения произвольной длины таким же образом.

Для чего это стоит: я нашел подобный вопрос у меня, но она имеет дело с образами, а не текст, поэтому решение совершенно отличается от того, что меня интересует: Center a Variable Width/Height Image Inside Fixed Height/Variable Width Container

источник

2016-03-03 Brian C

Вы попробуйте это: http://simplefocus.com/flowtype/? –

Это не помогло, я боюсь. Спасибо за предложение. –

обновленный ответ

См. Это new fork. Просто делает немного странные вещи с JavaScript, чтобы попытаться найти наилучшее соотношение для размера шрифта на основе ширины:

Соответствующие JS:

$('.go-nogo-status').text(message); 
    $('.go-nogo-status').css('font-size', '100%'); 

    var w = $('.go-nogo-status').width(); 
    $('.go-nogo-status').css('font-size', (w*3)/w + 'vmin')

Соответствующий CSS:

.go-nogo-status{ 
    font-weight: bold; 
    text-align: center; 
    font-size: 3vw; 
    font-variant: small-caps; 
    font-family: Arial, Helvetica, sans-serif; 
    display: inline-block; 
    margin-left: 50%; 
    transform: translateX(-50%); 
    white-space: nowrap; 
}

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

оригинальный ответ

Одним из возможных CSS-единственное решение, чтобы сделать ваш размер шрифта на основе vw. Вот fork of your fiddle. Соответствующий CSS часть является:

.go-nogo-status{ 
    font-weight: bold; 
    text-align: center; 
    font-size: 3vw; /* here */ 
    font-variant: small-caps; 
    font-family: Arial, Helvetica, sans-serif; 
}

Различные размеры экрана:

Это называют "размером книгопечатания видового экрана", а вот в relevant article on CSS tricks.

В CSS3 есть несколько новых значений для определения размеров относительно текущего размера видового экрана: vw, vh и vmin.

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

источник

2016-03-04 00:10:58

Спасибо! Я тоже пробовал vw, но IE все же позволяет ему иногда выходить из контейнера. Также он продолжает уменьшать его, когда у него есть место для перехода на следующую строку. Если вы измените размер своей скрипки еще меньше, текст на первом снимке будет уменьшаться, вместо того, чтобы добавлять «Мне нужно, чтобы все было в одном», на том же, что и «Место». Решение только с CSS ни в коем случае не требуется, в любом случае на этом сайте много javascript. –

@AlphaBetaParkingLot обновил мой ответ с другой попытки –

Еще раз спасибо. Технически это соответствует описанию, которое я дал, но за счет того, что текст излишне мал и его трудно читать, обратите внимание, что даже очень короткие сообщения сокращаются дольше. Так что это не сработает с тем, что мне нужно. Но +1 для вашей помощи. Тем не менее. Я буду продолжать играть с ним. –

Вы указали сообщение переменной длины в контейнере переменной ширины, что должно оставаться на одной линии. Это имеет несколько последствий:

Максимальное количество символов. Что произойдет, если сообщение содержит 1000 символов? 2000?
Минимальный размер текста. Насколько маленький текст может быть до того, как пользователь станет нечетким?
Минимальная ширина для контейнера.

Эти значения должны быть определены для решения JavaScript или CSS. FitText должен работать на вас.

Настройте свою страницу с тем, что, как известно, максимальное количество символов для сообщения и установите браузер на минимальной ширине. Затем отрегулируйте функцию FitText, чтобы текст был разборчивым и помещался в контейнер.

Это может работать для вас с помощью FitText:

$(".go-nogo-status").fitText(4, { minFontSize: '15px', maxFontSize: '32px' });

И добавьте следующую строку в ваш CSS

.go-nogo-container{ 
    white-space: nowrap; 
}

источник

2016-03-04 02:02:45 Robert

Я никогда не говорил, что это должно быть на одной линии. Только то, что он не может покинуть контейнер. Контейнер имеет высоту 30 пикселей, поэтому две линии с 12-кратным высоким шрифтом будут вполне приемлемыми. –

Я сейчас не на своем компьютере, но попробую завтра. –

Измените размер любой длины в соответствии с переменной шириной, контейнером с фиксированной высотой

ответ

обновленный ответ

оригинальный ответ

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