Блог

Главная - Вопросы по программированию - Оберните текст с… для процентной ширины для div

Оберните текст с… для процентной ширины для div

#html #css

Вопрос:

Я хочу обернуть текст из … когда это слишком долго.

Требования таковы:

  • размер коробки составляет от 40% до 70% ширины родительского элемента
  • текст составляет 90% ширины этого поля
  • текст расположен по центру

У меня есть готовый код, но он не работает должным образом.

Должен:

  • Первое, что вам нужно сделать, это развернуть коробку до максимального размера, а затем, когда она не сможет развернуться, она сложится

В настоящее время добавляю … прежде чем он достигнет максимальной ширины (вы можете изменить длину текста и проверить его

Ниже я представляю, как это работает:

 .container {
  width: 400px;
  height: 100px;
  display: flex;
  justify-content: center;
  background-color: red;
}

.inner {
  max-width: 70%;
  min-width: 40%;
  height: 50px;
  background-color: #FFFDD0;
}

.center {
  position: relative;
  justify-content: center;
  align-items: center;
  display: flex;
  top: 50%;
  transform: translate(0, -50%);
}

.text {
    color: #000000;
    line-height: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 90%;
    text-align: center;
} 
 <div class="container">
  <div class="inner center">
    <span class="text">Content a b c d e f g h i j k l m n o p</span>
  </div>
</div>

Ответ №1:

inline коробка не может получить какой-либо размер, display ее необходимо сбросить до любого другого значения, соответствующего вашим требованиям.

40% — 70% можно установить с помощью min-width и max-width .

Из того, что я в основном понял, вы бы попытались сделать что-то подобное :

 .container {
  width: 400px;
  height: 100px;
  display: flex;
  justify-content: center;
  background-color: red;
  border: solid;
}

.inner {
  min-width: 40%;
  max-width: 70%;
  height: 50px;
  background-color: #FFFDD0;
  border: solid;
  margin: auto;
  flex-shrink: 0;
  text-align: center;
}

.text {
  display: inline-block;/* inline cannot be sized, a resize is necessary*/
  color: #000000;
  line-height: 50px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 90%;/* works if not an inline display box*/
  text-align: center;
} 
 <div class="container">
  <div class="inner center">
    <span class="text">Content a b c d e f g h i j k l m n o p</span>
  </div>
</div>

<div class="container">
  <div class="inner center">
    <span class="text">Content a b c d e f g h i k l m</span>
  </div>
</div>

<div class="container">
  <div class="inner center">
    <span class="text">Content</span>
  </div>
</div>

но также : когда он не может расшириться, он будет складываться, смущает меня, пока вы используете white-space:nowrap и многоточие. В некоторых случаях он не будет складываться, но будет усекать текст и показывать точки .

Метки: