Как растянуть содержимое, чтобы заполнить контейнер, при этом равномерно оборачивая текст только при необходимости, используя CSS? - PullRequest
Новая
       0

Как растянуть содержимое, чтобы заполнить контейнер, при этом равномерно оборачивая текст только при необходимости, используя CSS?

0 голосов
/ 04 февраля 2020

У меня есть страница для заполнения некоторых значений. Я пытаюсь использовать CSS для правильного разбиения строк текста без необходимости <br> элементов.

Предполагается, что работать так:

  • Содержание Предполагается, что он полностью заполняет (горизонтально) верхний контейнер <div>, но не переполняет его. Элементы
  • <select> и <input> растягиваются, чтобы заполнить доступное пространство, и имеют минимальную ширину.
  • Ширина элементов <span> должна быть максимально короткой, избегая при этом разрыва строк, если в этом нет необходимости.
  • <span> элементы должны разбивать линию только тогда, когда они не совпадают с другими элементами в одной строке ( <select> или <input>) не могут иметь минимальную ширину и не переполняться.
  • Когда элемент <span> разбит на более чем одну строку, он должен равномерно распределять текст, чтобы он имел самый короткий ширина (хотя все еще не повторяется излишне ломать линии). Пример:

Правильно: 

One two
three

Неверно: 

One
two three

One
two
three

Код: 

body {
  background-color: rgb(33, 38, 45);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

body > div {
  background-color: rgb(32, 32, 32);
  margin: 0 auto;
  white-space: nowrap;
  width: 400px;
}

div > div {
  align-items: center;
  display: flex;
  margin-top: 10px;
}

span {
  text-align: center;
}

span.green {
  color: rgb(0, 128, 0);
}

span.red {
  color: rgb(196, 0, 0);
}

span.blue {
  color: rgb(64, 64, 255);
}

span.yellow {
  color: rgb(255, 128, 0);
}

select {
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid rgb(196, 196, 196);
  border-radius: 5px;
  color: rgb(228, 167, 105);
  font-size: 20px;
  margin-left: 10px;
  min-width: 200px;
  outline: none;
  padding: 10px;
  width: 100%;
}

option {
  color: rgb(0, 0, 0);
}

option:first-child {
  display: none;
}

input {
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid rgb(196, 196, 196);
  border-radius: 5px;
  color: rgb(228, 167, 105);
  font-size: 20px;
  margin-left: 10px;
  min-width: 200px;
  outline: none;
  padding: 10px;
  width: 100%;
}
<body>
  <div>
    <div>
      <span class="green">Short text:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="green">Slightly longer text:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="red">Text suppost to break into three lines:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="blue">Text broken into<br>two lines manually:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="green">This text is<br>corretly broken<br>into three lines:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="yellow">Text<br>incorrectly<br>broken:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="green">Remarks:</span><input type="text">
    </div>
    <div>
      <span class="red">No no no no no<br>no:</span><input type="text">
    </div>
    <div>
      <span class="green">Yes yes yes<br>yes yes:</span><input type="text">
    </div>
  </div>
</body>

Я использую Chrome и это выглядит так:

Visual result

Вот как это выглядит:

Visual representation

Я думал, что первый красный будет помещаться в две строки, но это не так (он переполняется ) поэтому я отредактировал его до трех:

Visual overflow

Ответы [ 3 ]

0 голосов
/ 04 февраля 2020

Я абсолютно не знаю, каковы критерии того, чтобы текст разбивался на две строки вместо трех. Я не могу понять это по почте, но я сделаю это.

Может быть, это может быть то, что вы хотите: 

body {
  background-color: rgb(33, 38, 45);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

body > div {
  background-color: rgb(32, 32, 32);
  margin: 0 auto;
 /* white-space: nowrap; remove, fix it with flex since you're already using it */
  width: 400px;
}

div > div {
  align-items: center;
  display: flex;
  margin-top: 10px;
  
}

span {
  text-align: center;
}

span.green {
  color: rgb(0, 128, 0);
}

span.red {
  color: rgb(196, 0, 0);
}

span.blue {
  color: rgb(64, 64, 255);
}

span.yellow {
  color: rgb(255, 128, 0);
}

select {
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid rgb(196, 196, 196);
  border-radius: 5px;
  color: rgb(228, 167, 105);
  font-size: 20px;
  margin-left: 10px;
  min-width: 200px;
  outline: none;
  padding: 10px;
  width: 100%;
  flex:1; /* add this */
}

option {
  color: rgb(0, 0, 0);
}

option:first-child {
  display: none;
}

input {
     background-color: rgba(0, 0, 0, 0.2);
    border: 2px solid rgb(196, 196, 196);
    border-radius: 5px;
    color: rgb(228, 167, 105);
    font-size: 20px;
    margin-left: 10px;
    /* min-width: 200px; remove it, unecessary since body has fixed width */
    outline: none;
    padding: 10px;
    /* width: 100%; remove, unecessary with using flex*/
    flex: 1; /* add this */
}
<body>
  <div>
    <div>
      <span class="green">Short text:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="green">Slightly longer text:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="red">Text supposed to break into two lines:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="blue">Text broken into two lines manually:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="green">This text is corretly broken into three lines:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="yellow">Text incorrectly broken:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="green">Remarks:</span><input type="text">
    </div>
    <div>
      <span class="red">No no no no no no:</span><input type="text">
    </div>
    <div>
      <span class="green">Yes yes yes yes yes:</span><input type="text">
    </div>
  </div>
</body>

Вы также можете рассмотреть следующие моменты: 1) выравнивание текста по левому краю, это будет выглядеть более четким. 2) играть с шириной 'body> div' 3) возможно, не использовать px для ширины (не отвечает! Используйте em, vw или худший случай%).

ps Я нашел 410px, чтобы текст тоже выглядел лучше, но подумайте о том, чтобы сделать ширину немного более гибкой со значениями в соответствии с шириной экрана. Используйте медиа-запросы для разных размеров экрана.

ps2 Просто небольшая опечатка: она не должна поддерживать. Если вы этого хотели:)

Полезное руководство по flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

0 голосов
/ 04 февраля 2020

Пытаясь найти решение, я искал «css Равномерно завернуть текст» в надежде, прежде всего, выяснить, как получить текст, который выглядит следующим образом: 

This text is wrongly distributed in the first example but correctly distributed in the
second example.

Чтобы быть равномерным распределяется так: 

This text is wrongly distributed in the first example
but correctly distributed in the second example.

И я нашел старый вопрос Сбалансированное перенос текста в HTML, который указывает, что в настоящее время это невозможно сделать, используя CSS, хотя есть предложение для text-wrap: balance (которое должно быть go через длительный процесс, возможно, будет принято, добавлено и поддержано).

Можно использовать JavaScript для автоматического добавления строки соответственно разбивается в правильных местах.

Использование white-space: normal; в верхнем контейнере (body > div) переносит текст, но не с нужным количеством строк, так как логики свойства c для разрыва строки отличаются чем предполагаемое поведение, объясненное в вопросе.

0 голосов
/ 04 февраля 2020

Поскольку ваши ярлыки настолько длинные, что вы не можете сделать их встроенными, поэтому наилучшее возможное решение, которое я предлагаю ниже, пожалуйста, посмотрите

Решение: удалено white-space из main div и используйте некоторые свойства flex вместе с атрибутом max-width для input/select

body {
  background-color: rgb(33, 38, 45);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

body > div {
  background-color: rgb(32, 32, 32);
  margin: 0 auto;
  width: 400px;
}

div > div {
    align-items: center;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
}

span {
  text-align: center;
      min-width: 37%;
}

span.green {
  color: rgb(0, 128, 0);
}

span.red {
  color: rgb(196, 0, 0);
}

span.blue {
  color: rgb(64, 64, 255);
}

span.yellow {
  color: rgb(255, 128, 0);
}

select {
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid rgb(196, 196, 196);
  border-radius: 5px;
  color: rgb(228, 167, 105);
  font-size: 20px;
  min-width: 200px;
  outline: none;
  padding: 10px;
  width: 100%;
}

option {
  color: rgb(0, 0, 0);
}

option:first-child {
  display: none;
}

input {
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px solid rgb(196, 196, 196);
  border-radius: 5px;
  color: rgb(228, 167, 105);
  font-size: 20px;
  min-width: 177px;
  outline: none;
  padding: 10px;
  width: 100%;
}
<body>
  <div>
    <div>
      <span class="green">Short text:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="green">Slightly longer text:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="red">Text suppost to break into two lines:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="blue">Text broken into two lines manually:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="green">This text is corretly broken into three lines:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="yellow">Text incorrectly broken:</span><select><option>Select an option</option><option>Yes</option><option>No</option></select>
    </div>
    <div>
      <span class="green">Remarks:</span><input type="text">
    </div>
    <div>
      <span class="red">No no no no no no:</span><input type="text">
    </div>
    <div>
      <span class="green">Yes yes yes yes yes:</span><input type="text">
    </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...