Почему следующий текст не сворачивается в многоточие?
Это код:
<div class = "grid w-full gap-4 grid-cols-8">
<div class = "flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed"><svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "currentColor" stroke = "none" class = "tabler-icon tabler-icon-file-filled h-10 w-10">
<path d = "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
<path d = "M19 7h-4l-.001 -4.001z"></path>
</svg><span class = "overflow-hidden text-ellipsis text-center text-xs">sssssssssssssss</span></div>
<div class = "flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed"><svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "currentColor" stroke = "none" class = "tabler-icon tabler-icon-file-filled h-10 w-10">
<path d = "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
<path d = "M19 7h-4l-.001 -4.001z"></path>
</svg><span class = "overflow-hidden text-ellipsis text-center text-xs">dummy.mib</span></div>
</div>
Текст вырывается из контейнера, а не сворачивается. Почему так происходит и как это исправить?
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
53
4
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 4
попробуйте этот код
<div class = "grid w-full gap-4 grid-cols-8">
<div class = "flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed" style = "width: 100px;">
<svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "currentColor" stroke = "none" class = "tabler-icon tabler-icon-file-filled h-10 w-10">
<path d = "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
<path d = "M19 7h-4l-.001 -4.001z"></path>
</svg>
<span class = "overflow-hidden text-ellipsis text-center text-xs" style = "white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;">sssssssssssssss</span>
</div>
<div class = "flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed" style = "width: 100px;">
<svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "currentColor" stroke = "none" class = "tabler-icon tabler-icon-file-filled h-10 w-10">
<path d = "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
<path d = "M19 7h-4l-.001 -4.001z"></path>
</svg>
<span class = "overflow-hidden text-ellipsis text-center text-xs" style = "white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;">dummy.mib</span>
</div>
</div>Добавьте свойства white-space, overflow и text-overflow к span. он гарантирует, что текст будет усечен (с многоточием), если он выйдет за пределы контейнера.
<div class = "grid w-full gap-4 grid-cols-8">
<div class = "flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed">
<svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "currentColor" stroke = "none" class = "tabler-icon tabler-icon-file-filled h-10 w-10">
<path d = "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
<path d = "M19 7h-4l-.001 -4.001z"></path>
</svg>
<span class = "overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs">sssssssssssssss</span>
</div>
<div class = "flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed">
<svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "currentColor" stroke = "none" class = "tabler-icon tabler-icon-file-filled h-10 w-10">
<path d = "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
<path d = "M19 7h-4l-.001 -4.001z"></path>
</svg>
<span class = "overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs">dummy.mib</span>
</div>
</div>
Извините, вы что-нибудь добавили в код? Я скопировал ваш код и все равно вижу тот же результат: play.tailwindcss.com/8OWtgTHorb.
—
16.07.2024 05:27
Ответ принят как подходящий
Текст вырывается из контейнера
Это связано с тем, что sssssss... является непрерывным словом и по умолчанию не приводит к разрыву строки. В Tailwind вы можете использовать break-all, чтобы сделать разрыв текста в любой позиции.
И, похоже, вы собираетесь реализовать многоточие переполнения текста. В Tailwind вы можете просто использовать line-clamp-*, чтобы напрямую добиться этого эффекта.
<div class = "grid w-full grid-cols-8 gap-4">
<div class = "max-w-small flex w-full cursor-not-allowed flex-col items-center justify-center gap-1">
<svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "currentColor" stroke = "none" class = "tabler-icon tabler-icon-file-filled h-10 w-10">
<path d = "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
<path d = "M19 7h-4l-.001 -4.001z"></path></svg
><span class = "line-clamp-2 break-all text-center text-xs">ssssssssssssssssssssssssssssssssssssssssssssssssssssss</span>
</div>
<div class = "max-w-small flex w-full cursor-not-allowed flex-col items-center justify-center gap-1">
<svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "currentColor" stroke = "none" class = "tabler-icon tabler-icon-file-filled h-10 w-10">
<path d = "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
<path d = "M19 7h-4l-.001 -4.001z"></path></svg
><span class = "line-clamp-2 break-all text-center text-xs">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum, praesentium.</span>
</div>
</div>
ДЕМО на Tailwind Play.
самое простое, что я сделал, это заменил overflow на верхний элемент div.
<div class = "grid w-full gap-4 grid-cols-8">
<div class = "flex w-full flex-col gap-1 justify-center overflow-hidden items-center max-w-small cursor-not-allowed"><svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "currentColor" stroke = "none" class = "tabler-icon tabler-icon-file-filled h-10 w-10">
<path d = "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
<path d = "M19 7h-4l-.001 -4.001z"></path>
</svg>
<span class = "text-ellipsis text-center text-xs">sssssssssssssssssssssssssssadasd</span>
</div>
<div class = "flex w-full flex-col gap-1 justify-center overflow-hidden items-center max-w-small cursor-not-allowed"><svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "currentColor" stroke = "none" class = "tabler-icon tabler-icon-file-filled h-10 w-10">
<path d = "M12 2l.117 .007a1 1 0 0 1 .876 .876l.007 .117v4l.005 .15a2 2 0 0 0 1.838 1.844l.157 .006h4l.117 .007a1 1 0 0 1 .876 .876l.007 .117v9a3 3 0 0 1 -2.824 2.995l-.176 .005h-10a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-14a3 3 0 0 1 2.824 -2.995l.176 -.005h5z"></path>
<path d = "M19 7h-4l-.001 -4.001z"></path>
</svg><span class = "text-ellipsis text-center text-xs">dummy.mibasdasdasdsad</span></div>
</div>
Другие вопросы по теме
Как показать список выбранных опций при наведении?
Гибкая ширина в таблице HTML
Можно ли использовать оператор else if для поэтапного раскрытия элементов с помощью JavaScript?
Можно ли изменить цвет элемента при наведении курсора мыши с html на Angular?
Jquery .length продолжает возвращать 0 на странице LinkedIn
FreeCodeCamp: Адаптивный веб-дизайн — сертификация по форме опроса
Центрировать форму внутри фонового изображения и рамки
Когда я добавляю переполнение: скрыто, мои раскрывающиеся списки перестают работать
Как сделать элементы серыми на основе имени класса?
Выполнение простого расчета в таблице с переменным вводом пользователем (числовое поле)
Похожие вопросы
Как показать список выбранных опций при наведении?
Загрузка данных из базы данных в таблицу HTML в ASP.Net Core MVC
Гибкая ширина в таблице HTML
Как перейти на страницу, нажав на гамбургер-меню?
Jquery .length продолжает возвращать 0 на странице LinkedIn
FreeCodeCamp: Адаптивный веб-дизайн — сертификация по форме опроса
Центрировать форму внутри фонового изображения и рамки
Когда я добавляю переполнение: скрыто, мои раскрывающиеся списки перестают работать
Потрясающие svg-иконки в openlayers
Встроенное преобразование заголовков из RTF в HTML с помощью Pandoc
Извините, не могли бы вы вместо этого использовать TailwindCSS?