Используйте CSS, чтобы разбить длинную строку на две строки равной длины - PullRequest
Новая
       59

Используйте CSS, чтобы разбить длинную строку на две строки равной длины

0 голосов
/ 02 октября 2019

У меня длинный URL, который не помещается в ширину контейнера в мобильном представлении, поэтому я добавил word-wrap:break-word; в контейнер. В результате получается очень длинная строка в одной строке и очень короткий остаток строки во второй строке.

Как сделать так, чтобы обе строки имели одинаковое количество символов (чтобы они могли иметь одинаковую ширину? )

1 Ответ

0 голосов
/ 02 октября 2019

Единственный реальный способ решить эту проблему - убедиться, что width контейнера ограничен (примерно) двойной длиной текста.

Например, следующий текст равен примерно 630пикселей, поэтому установка width в 315px в дополнение к word-wrap: break-word приводит к тому, что текст в обеих строках будет одинаковой длины: 

.example {
  width: 315px;
  word-wrap: break-word;
}
<div class="example">AVeryVeryVeryVeryLongUrl/SomeFolder/SomeSubFolder/SomePage.htmlisthebestfileextension</div>

Обратите внимание, что с JavaScript .offsetWidth вы можете вычислить существующую ширину и установить новую ширину автоматически, хотя я этого не делаю верю это возможно с комбинацией calc() и width: fit-width в чистом CSS. 

var example = document.getElementsByClassName('example')[0];
example.style.width = example.offsetWidth / 2 - 8 + "px";
// Half the current width, also accounting for the 8px of margin
.example {
  word-wrap: break-word;
}
<div class="example">AVeryVeryVeryVeryLongUrl/SomeFolder/SomeSubFolder/SomePage.htmlisthebestfileextension</div>
...