Изминение высоты текста
Добрый день.
Есть блок {display: inline-block; width: 90%; heidth: 40px;}. (эти стили можно изменить, если надо, но абсолютная ширина не известна, только относительно родителя). В блоке находится длинное слово, от 10 до 30 символов. В большинстве случаев это слово помещается в одну строчку, но иногда оно получается слишком длинным. И тогда слово надо сделать на две строчки и уменьшить шрифт (font-size с 14 до 11). Выглядеть должно примерно вот так: http://imu.gr/images/2017/02/10/Virt...0_11-16-43.png Подскажите пожалуйста как правильно сделать описанное поведение? |
TestUser013,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider{
width: 200px;
}
.hot{
border: 1px dashed Gray; padding: 5px; font-size : 14px; display: inline-block; width: 90%; height: 40px;
}
.mini {
font-size : 11px;word-wrap: break-word;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call( document.querySelectorAll('.hot'), function(el) {
if(el.scrollWidth > el.clientWidth) el.classList.add("mini")
});
});
</script>
</head>
<body>
<div id="slider">
<div class="hot">GHBVFRT</div>
<div class="hot">GHBVFRTGFDERTYUJHGNVFDSXCDE</div>
<div class="hot">GHBVFRT</div>
<div class="hot">GHBVFRTGFDERTYUJHGNVFDSXCDE</div>
<div class="hot">GHBVFRT</div>
<div class="hot">GHBVFRTGFDERTYUJHGNVFDSXCDE</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:23. |