Форум

Начинающий-Js-кодер · #1 (**permalink**) 23.07.2018, 21:02

Здравствуйте, скажите, как можно посчитать длину в пикселях длину строки.
Например я ввожу слово: hello world и он мне показывает сколько длина этой фразы.
Спасибо.

рони · #2 (**permalink**) 23.07.2018, 21:06

Начинающий-Js-кодер,
всё зависит от элемента и его css в котором будет этот текст.

Начинающий-Js-кодер · #3 (**permalink**) 23.07.2018, 21:08

Ну элемент пусть будет div и он должен создавать динамически с шириной взятой от ширины слова+5px слева и справа.

рони · #4 (**permalink**) 23.07.2018, 21:29

Начинающий-Js-кодер,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   div {
      border: 2px solid green;
   }

  </style>


</head>

<body>
  <script>
    function fn(str)
    {
      var container = document.createElement("div")
      container.appendChild(document.createTextNode(str));
      document.body.appendChild(container);
      container.style.display = "inline"
      var width = container.offsetWidth;
      container.style.display = "";
      container.style.width = width + "px";
      container.style.padding = "0 5px";
    }
    fn("hello world")
  </script>

</body>
</html>

Начинающий-Js-кодер · #5 (**permalink**) 23.07.2018, 21:35

Спасибо. Гениально. Но вопрос:

container.style.display = "inline"
...
	      container.style.display = "";

Зачем именно так делать?

рони · #6 (**permalink**) 23.07.2018, 21:37

Начинающий-Js-кодер,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   div.test {
      border: 2px solid green;
      display: inline-block;
      padding: 0 5px;
      text-align: center;
   }

  </style>


</head>

<body>
  <script>
    function fn(str)
    {
      var container = document.createElement("div")
      container.appendChild(document.createTextNode(str));
      document.body.appendChild(container);
      container.classList.add("test")
    }
    fn("hello world")
  </script>

</body>
</html>

Начинающий-Js-кодер · #7 (**permalink**) 23.07.2018, 21:40

Гений!

рони · #8 (**permalink**) 23.07.2018, 21:41

Сообщение от Начинающий-Js-кодер

Зачем именно так делать?

div по умолчанию display: block; а значит он растянут максимально,
container.style.display = "inline" сужаем ширину до текста (надобы word-wrap: break-word; ещё)
container.style.display = ""; возращаем display=block

Начинающий-Js-кодер · #9 (**permalink**) 23.07.2018, 21:48

Теперь понял. Идеальное решение.

Начинающий-Js-кодер · #10 (**permalink**) 24.07.2018, 14:21

Хотел спросить:
Вот допустим есть у нас не 1 слово, а 5(или любое другое) и мы их должны вывести каждый в своем блоке отдельно, то есть так:
hello->world->hi->javascript->forum
Но расстояние между блоками должно быть строго 30 пикселей, тогда лучше делать не через inline-block, о пределять ширину каждого блока,потом прибавлять 30 пикселей и это будет позиция второго блока, так?

Форум

Справочник

Discord чат

Курсы javascript