Предотвращение увеличения ширины разрывов текстовых строк в flexbox - PullRequest
Новая
       136

Предотвращение увеличения ширины разрывов текстовых строк в flexbox

0 голосов
/ 20 июня 2020

Дан простой макет flexbox с изображением рядом с произвольным текстом, это желаемый результат: 

#container {
  align-items: center;
  background: black;
  display: flex;
  justify-content: center;
  padding: 10px;
  width: 500px; /* Dynamic */
}

#image {
  background: white;
  height: 50px; /* Dynamic */
  margin-right: 10px;
  width: 50px; /* Dynamic */
}

span {
  color: white;
  font-size: 40px;
  /* Make sure text also breaks when no hints are available */
  overflow-wrap: anywhere;
}
<div id="container">
  <div id="image"></div>
  <span>long_text_should_be_<br />allowed_to_break</span>
</div>

Однако для моего варианта использования я должен использовать <wbr> вместо <br>, что нарушает поведение центрирования. 

#container {
  align-items: center;
  background: black;
  display: flex;
  justify-content: center;
  padding: 10px;
  width: 500px;
}

#image {
  background: white;
  height: 50px;
  margin-right: 10px;
  width: 50px;
}

span {
  color: white;
  font-size: 40px;
  overflow-wrap: anywhere;
}
<div id="container">
  <div id="image"></div>
  <span>long_text_should_be_<wbr />allowed_to_break</span>
</div>

Я понимаю, что последнее является ожидаемым поведением, поскольку дочерние элементы flexbox заблокированы, а разрывы строк в блоках не сжимаются до фактической ширины текста. Но поскольку он работает так легко с <br>, мне интересно, можно ли его настроить для достижения того же результата с помощью <wbr> или альтернативных подсказок разрыва строки.

Цели:

  • Должен работать в динамической среде c размер, размеры контейнера и изображения могут отличаться
  • Должен вернуться к поведению break-all, когда не указаны подсказки разрыва строки
  • Должен работать с произвольной длиной текста от 1 до n символов
  • Должно работать только в последней версии Chrome с латинским текстом LTR

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Не используйте <br> или <wbr>. Это нехорошо, если вы будете использовать на сайте несколько языков.

Это простое решение в css: 

h1 {
  word-wrap: break-word;
  width: 400px;
}
0 голосов
/ 20 июня 2020

Вы пробовали использовать теги paragraph <p> и css для придания им верхнего или нижнего поля. 

#container {
  align-items: center;
  background-color: red;
  display: flex;
  justify-content: center;
  width: 500px;
}

#image {
  background: green;
  height: 50px;
  margin-right: 10px;
  width: 50px;
}
#custombr{
margin-top:5px;
margin-bottom:5px
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="container">
  <div id="image"></div>
  <h1>long_text_should_be_<p id="custombr">allowed_to_break</p></h1>
</div>

</body>
</html>
...