Как сделать многоточие в тексте
Подробности см. в рабочий пример. Суть в том, что стиль
.cutty {
display: flex;
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
кажется, что точки не заставляют точки при нажатии кнопки., несмотря на тот факт, что родитель-оболочка имеет стиль
.left {
display: flex;
flex: 1;
overflow: hidden;
}
Цель состоит в том, чтобы розовый милашка получил большую часть ширины фиолетового осталось, а коричневый фиксики остался той же ширины. Конечно, я хочу устранить перенос пробелов и отрезать лишнюю часть.
Мой способ поиска в Google заключается в том, чтобы убедиться, что инкапсулирующий родитель также настроен на скрытие переполнения. Однако, как показано на скрипке, этого не происходит. Также упоминалось об нулевой минимальной ширине. Однако попытка ничего не дала.
Что мне не хватает?
Ответы 1
Если вы удалите display: flex; из .cutty, этого ли вы хотите достичь?
да. Но что, если я хочу, чтобы милашка был гибким? Возможно, я хочу сохранить в нем кучу элементов, а не только текст, и что их расположение должно регулироваться flexbox... Пожалуйста, уточните, почему и как решить эту проблему.
Кроме того, еще одно дополнение: если я удалю дисплей: гибкий, чем мне его заменить? В производственном коде я получаю унаследованную гибкость для всех своих диапазонов и элементов div и не могу это контролировать. Как избавиться от флекса? Установка никто удалит компонент... Я пробовал блокировать и в линию, но это не дало изменений...
@KonradViltersten любое отображаемое значение будет выполнять сброс, блокировку или встраивание, это гибкий дочерний элемент, он будет вести себя как гибкий дочерний элемент :)
@G-Cyr Глупо... Так глупо... (Не ты, конечно. Я...) Думаю, пора собираться и идти домой. Слишком много CSS в день вас убьет. Сейчас 20:44, так что мне давно пора уйти с работы...)
display:flex + действительно короткое слово, и отсутствие гибкости и ширины делает точку не отображаемой jsfiddle.net/wyv6dsx0