Блог

Главная - Вопросы по программированию - Почему усеченный текст не работает в моем flexbox?

Почему усеченный текст не работает в моем flexbox?

#css #flexbox

#css #flexbox

Вопрос:

Вот мой код:

 * {
  margin: 0;
  padding: 0;
}

div,
ul,
li {
  display: flex;
}

#A,
ul {
  flex-direction: row;
  width: 100%;
}

#A {
  width: 130px;
  flex-wrap: wrap;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

#B {
  order: 0;
}

#D {
  order: 1;
  margin-left: auto;
}

#C {
  order: 2;
} 
 <div id="A">
  <div id="B">
    <span>123456789012</span>
  </div>
  <ul id="C">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <a id="D" href="google.com">google</a>
</div>

Вы также можете попробовать мой код на https://jsfiddle.net/w8h17f2d /

После запуска кода получается следующее:

введите описание изображения здесь

На самом деле, я хочу добиться этого:

введите описание изображения здесь

Вы можете спросить, почему такой HTML, потому что я пишу адаптивный веб-сайт. Приведенный выше код предназначен для мобильного сайта, а на ПК-сайте он будет выглядеть так:

введите описание изображения здесь

Как я могу это решить? Спасибо.

Ответ №1:

В span измените min-width на max-width и установите width .

 span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 60px;
}

Ответ №2:

Вы можете изменить направление потока вашего div на строку и добавить максимальную ширину для диапазона. Смотрите пример ниже.

 * {
  margin: 0;
  padding: 0;
}

div,
ul,
li {
  display: flex;
}

#A,
ul {
  flex-direction: row;
  width:100%;
}
#A{
  display: flse;
  flex-direction: row;
  width:130px;
  flex-wrap:wrap;
}
span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  max-width: 80px;
}
#B{
  order:0;
}
#D{
  order:1;
  margin-left:auto;
}
#C{
  order:2;
} 
 <div id="A">
<div id="B">
<span>123456789012</span>
</div>
<ul id="C">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<a id="D" href="google.com">google</a>
</div>