Блог

Главная - Вопросы по программированию - Поведение поплавка слева с многоточием

Поведение поплавка слева с многоточием

#html #css

Вопрос:

Я плохо разбираюсь в css или html и изо всех сил пытаюсь что-то сделать.

Ситуация:

  • Учитывая, что у меня есть родительский элемент с переменной шириной (например, 30% ширины экрана)
  • Его содержимое должно как можно больше заполнять ширину этого div, но прерываться в определенных точках, а не на каждом возможном слове
  • Когда ширина div не может быть занята последним в списке дочерних элементов, он должен опуститься ниже в следующую строку (это поведение очень похоже на float:слева).
  • Если ширина не может быть занята ее наименьшей частью, эта часть должна быть переполнена текстом:многоточие

Пример:

 <html>
    <head>
        <style>
            .container {
                width:30%;
                height:500px;
                border: 1px solid red;
            }

            .cell {
                border: 2px solid blue;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="cell">00:20 - 10:20 text text text</div>
            <div class="cell">address of some thing text</div>
            <div class="cell">name of someone text text text</div>
            <div class="cell">some task details text text text</div>
        </div>
    </body>
</html>

Когда float:left добавляется в класс .cell, достигается желаемое поведение, заполняющее ширину, но оно теряет поведение переполнения, скрытое и многоточие, когда вы уменьшаете размер окна, чтобы красная граница была меньше синей границы.

Любая помощь приветствуется! В разметке html ничего не задано, кроме того, что родительский элемент (.container) имеет переменную ширину.

Ответ №1:

Попробуйте использовать Flexbox для этого подход. Это хорошая альтернатива поплавкам.

 <html>
    <head>
        <style>
            .container {
                width: 30%;
                height: 500px;
                border: 1px solid red;
                display: flex;
                flex-wrap: wrap;
                align-content: flex-start;
                justify-content: flex-start;
            }

            .cell {
                border: 2px solid blue;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="cell">00:20 - 10:20 text text text</div>
            <div class="cell">address of some thing text</div>
            <div class="cell">name of someone text text text</div>
            <div class="cell">some task details text text text</div>
        </div>
    </body>
</html>

Комментарии:

1. Потрясающе, спасибо! Я рассматривал возможность использования flex для этого, но не мог понять, в какой конфигурации это будет работать. Это работает! 🙂

Ответ №2:

Если вы хотите использовать float, вам нужно добавить max-width:100% 

 .container {
  width: 30%;
  height: 500px;
  border: 1px solid red;
}

.cell {
  border: 2px solid blue;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  float: left;
  max-width: 100%;
  box-sizing:border-box;
} 
 <div class="container">
  <div class="cell">00:20 - 10:20 text text text</div>
  <div class="cell">address of some thing text</div>
  <div class="cell">name of someone text text text</div>
  <div class="cell">some task details text text text s text text text</div>
</div>
Метки: