Форум

TestUser013 · #1 (**permalink**) 10.02.2017, 12:17

Добрый день.
Есть блок {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

Подскажите пожалуйста как правильно сделать описанное поведение?

рони · #2 (**permalink**) 10.02.2017, 12:49

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>

Форум

Справочник

Discord чат

Курсы javascript