Давайте сначала посмотрим, почему размер текста такой, какой он есть в настоящее время. 3vw
означает 3%
ширины области просмотра. Важно отметить, что это значение используется для высоты символов. Мы можем вычислить ширину полного текста в процентах от ширины области просмотра. Это работает только для моно шрифта.
Для начала нам понадобится соотношение ширины / высоты шрифта. Ширина символа с одним интервалом зависит от шрифта. Я буду работать с Courier New
для этого примера. Я не уверен, где именно это найти, поэтому я буду использовать приблизительное значение 99/188
.
Если максимальное количество символов :
11 * 4 (Placeholder) + 3 (spaces) = 47
Тогда ширина 47 символов равна:
47 * 3vw * (99/188) = 74.25vw
Так что около 75%
от ширины области просмотра. Это означает, что когда отступы, поля и границы занимают более чем 25%
ширины (из-за изменения размера окна), содержимое текста больше не помещается в его контейнер.
Так как же нам сделать содержание подходит? Мы можем использовать функцию CSS calc()
, чтобы вычесть некоторое значение stati c из значения Dynami c. Для этого сначала нужно узнать ширину значений c. В вашем примере это stati c widths:
20px
поле для #song-container
15px
отступ для .container-fluid
1px
border для .panel
15px
padding для .panel-body
Не забывайте, что все эти значения присутствуют с обеих сторон, поэтому они занимают:
(20px + 15px + 1px + 15px) * 2 = 102px
Мы не можем вычесть это из 3vw
, потому что 3vw
- высота одного символа, тогда как 102px
- ширина строки c элементов. Теперь нам нужно преобразовать 102px
в высоту одного символа. Это делается путем распределения ширины по всем символам с последующим применением соотношения для преобразования ширины символов в высоту.
102px / 47 / (99/188) ≈ 4.121212121
Теперь мы сравниваем яблоки с яблоками и можем использовать calc(3vw - 102px / 47 / (99/188))
для размера шрифта , Теперь вы можете свободно играть со значением 3vw
. В примере я увеличил это значение до 3.5vw
.
Обратите внимание, что это не на 100% точно, я не учитывал интервал между символами, а соотношение ширины / высоты шрифта основано на измерении, а не данное.
#song-container {
text-align: center;
margin: 20px;
}
#song {
color: #000;
font-size: calc(3.5vw - 102px / 47 / (99/188));
font-family: "Courier New",monospace,Courier;
white-space: pre;
word-break: break-all;
text-align: left;
display: inline-block;
}
#song > span { /* Chords*/
color: #007fbf;
cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
<div id="song-container">
<div class="panel panel-default">
<div class="panel-body">
<span id="song">
[Placeholder]
<span>Em</span> <span>G</span>
Placeholder Placeholder Placeholder Placeholder
<span>D</span> <span>C</span>
Placeholder Placeholder Placeholder Placeholder
</span>
</div>
</div>
</div>
</div>
Это работает, но при изменении ширины stati c, максимального количества символов или соотношения ширины / высоты шрифта необходимо пересчитать значение компенсации , По этой причине лучше всего подойдет библиотека JavaScript. Вы можете найти некоторые из них, описанные в посте CSS -Trics Подгонка текста к контейнеру .
Я бы также посоветовал взглянуть на Масштабирование шрифтов на основе ширина контейнера вопрос, который имеет некоторые другие предложения.