Почему не работает text-overflow?
Почему-то не работает text-overflow . Вернее, текст обрезается, но не так — не добавляется многоточие в конце.
- Вопрос задан более трёх лет назад
- 3947 просмотров
1) Если вы кроссбраузерно хотите флексы объявить, то неправильно это делаете:
2) Для li тоже самое повторять не надо.
3) Для того, чтоб text-overflow сработал должна быть ширина задана явно (хотя бы максимальная).
Не знаю этого ли вы хотели добиться.
Почему именно так надо писать? И почему -ms- идет первым? Это принципиально? И про какую именно кроссбраузерность вы говорите (от каких версий браузеров)?
Добиться я хотел немного не этого. Выше писал, если ширина окно позволяет показать весь текст, то обрезать его не надо. 100% тоже не подойдет. Другие варианты есть?
Владимир Новицкий: Потому что синтаксис флексов менялся со временем. W3C переписывали рекомендацию несколько раз, а браузеры реализовывали фичи, не дожидаясь финальной рекомендации.
Кроссбраузерно, значит кроссбраузерно. Этот код будет работать везде где хоть как-то поддерживаются флексы. Подробнее тут.
Не видя макет непонятно чего вы хотите, например нафига у вас там nth-last-child и почему в последнем блоке две ссылки вместо одной.
GreatRash: Фух, ну наконец-то. Теперь получилось. Спасибо большое!
А по flexbox’у, я знаю, что есть старый и есть новый, но почему -ms- первым идет? Это принципиально или просто Вы так написали?
Источник
Почему многоточие CSS не работает в ячейке таблицы?
рассмотрим следующий пример: (видео здесь)
выход: width = 139 , и многоточие не появляется.
чего мне здесь не хватает?
9 ответов:
решает проблему, а также.
другое возможное решение-установить table-layout: fixed; для таблицы, а также установить его в width . Например: http://jsfiddle.net/fd3Zx/5/
на содержащую таблицу, поэтому она хорошо работает в IE9 (если вы используете максимальную ширину).
как уже было сказано, вы можете использовать td < display: block; >но это противоречит цели использования таблицы.
можно использовать table < table-layout: fixed; >но может быть, вы хотите это вести себя по-разному для некоторых колонн.
так что лучший способ достичь того, что вы хотите было бы обернуть текст в
(а не
демо-страницы
для таблиц с динамической шириной, я нашел ниже способ получения удовлетворительных результатов. Каждый
тогда настоящий трюк-установить max-width (на
это эффективно вызовет элемент ширина, которая будет «привязана» к ширине видового экрана (окно браузера) и приведет к адаптивному отсечению контента. Установите vw единицы измерения к удовлетворительному значению необходимо.
минимальный CSS:
вот рабочее демо:
просто предлагая альтернативу, поскольку у меня была эта проблема, и ни один из других ответов здесь не имел желаемого эффекта, который я хотел. Поэтому вместо этого я использовал список. Теперь семантически информацию, которую я выводил, можно было рассматривать как табличные данные, но также и перечисленные данные.
Итак, в конце концов, что я сделал:
так что в принципе ul и table , li и tr и span и td .
затем в CSS я установил span элементы будь display:block; и float:left; (Я предпочитаю эту комбинацию inline-block как это будет работать в старых версиях IE, чтобы очистить эффект float см.:http://css-tricks.com/snippets/css/clear-fix/) и также иметь эллипсы:
тогда все, что вы делаете, это установить max-widths ваших пролетов, и это придаст списку вид таблицы.
вместо того, чтобы использовать многоточие для решения проблемы переполнения текста, я обнаружил, что отключенный и стилизованный ввод выглядит лучше и по-прежнему позволяет пользователю просматривать и выбирать всю строку, если им это нужно.
он выглядит как текстовое поле, но выделяет возможность так более удобный
если вы не хотите устанавливать max-width в td (например, в ответ), вы можете установить max-width в div:
Примечание: 100% не работает, но 99% делает трюк в FF. Другим современным браузерам не нужны глупые div-хаки.
Регистрация box-sizing css свойство вашего td элементы. У меня была проблема с шаблоном css, который устанавливает его в border-box значение. Вам нужно установить box-sizing: content-box .
Источник
CSS text-overflow: ellipsis; not working?
I don’t know why this simple CSS isn’t working.
Should cut off around the 4th «Test»
17 Answers 17
text-overflow:ellipsis; only works when the following are true:
- The element’s width must be constrained in px (pixels). Width in % (percentage) won’t work.
- The element must have overflow:hidden and white-space:nowrap set.
The reason you’re having problems here is because the width of your a element isn’t constrained. You do have a width setting, but because the element is set to display:inline (i.e. the default) it is ignoring it, and nothing else is constraining its width either.
You can fix this by doing one of the following:
- Set the element to display:inline-block or display:block (probably the former, but depends on your layout needs).
- Set one of its container elements to display:block and give that element a fixed width or max-width .
- Set the element to float:left or float:right (probably the former, but again, either should have the same effect as far as the ellipsis is concerned).
I’d suggest display:inline-block , since this will have the minimum collateral impact on your layout; it works very much like the display:inline that it’s using currently as far as the layout is concerned, but feel free to experiment with the other points as well; I’ve tried to give as much info as possible to help you understand how these things interact together; a large part of understanding CSS is about understanding how various styles work together.
Here’s a snippet with your code, with a display:inline-block added, to show how close you were.
Источник