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

Question

Существует ли математическое соотношение между размером шрифтом и шириной в экрана так, что нет ни слов перерыва во время изменения размеров по ширине окна просмотра/окна?

Например, если установить размер шрифта абзаца в 16px, где первая строка абзаца reads-

Lorem Ipsum боль сидеть Амет, consectetur adipisicing Элит.

Если бы я, чтобы изменить ширину моего просмотра, было бы слово перерыв в случае, если ширина окна просмотра мала для размещения предложения, потому что размер шрифта задается в единицах px.

Теперь, когда размер шрифта увеличивается/уменьшается во время изменения ширины окна просмотра, если устройство установлено в vw, я хочу убедиться, что нет разрыва слов, представьте, что вы изменяете размер изображения с текстом на нем. Можно ли это достичь?

Answer 1

Вы можете установить свой контейнер на определенную ширину vw, а затем установить размер шрифта в размере vw. С этими двумя вещами размеры должны работать так, как вы ожидаете, предоставил шрифт загружен явно, вместо того, чтобы полагаться на «любой шрифт, который браузер решает использовать», поэтому нет CSS serif, но также нет CSS "Times New Roman", потому что вы не знаете, какая версия этого шрифта будет фактически использоваться, и поэтому вы не можете доверять тому, что метрики шрифта - это то, что вам нужно. Итак:

1. нагрузки определенный шрифт через @font-face правила
2. убедитесь, что контейнер установлен, чтобы иметь ширину, выраженную в vw
3. убедитесь, что ваш контейнер определяет его размер шрифта в vw единицах.

CSS:

.rs { 
    width: 50vw; 
    background: lightgreen; 
    font-family: lato; 
    font-size: 3.3vw; 
} 

HTML:

.... 
<link href="https://fonts.googleapis.com/css?family=Lato" 
<div class="rs"> 
    This is text This is text This is text T 
</div> 

Живой пример: http://jsbin.com/januxevebe/edit?html,css,output