text-overflow

25 Aug, 2004

Интереснейшее свойство нашел. Все наверняка имели дело с обычным overflow, ну или хотя бы слышали. Overflow определяет, что должно происходить с содержимым блока если оно переполняет его. То есть выходит за пределы этого блока. Точно так же text-overflow указывает, что произойдет с текстом, когда он переполнит место ему отведенное.

Вот например такая ситуация:

.overflowing{
      border:2px solid #000;
      text-overflow:ellipsis;
      overflow:hidden;
      white-space:nowrap;
      width:256px;/*:)*/
      margin:10px;
      padding:10px;
}

(ellipsis в переводе с англ. — многоточие)

Donec non libero. Curabitur metus nulla, fringilla in, mollis eget, condimentum quis, metus. Integer sed arcu quis sem dapibus lacinia. Integer quis felis. Maecenas ac lorem sit amet est congue ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris quis sapien. Integer ipsum. Duis in eros. Aliquam tincidunt cursus wisi. Cras commodo, velit mattis sagittis tincidunt, massa mi consectetuer purus, id malesuada massa mauris sed nulla.

Как видите достигнув конца блока текст был обрезан. Казалось бы это и есть свойство overflow, и зачем было выдумывать text-overflow.
Но.
Это по меньшей мере странно. Но это свойство поддерживает лишь IE 6. Когда дело касалось фильтров, порожденных больной фантазией программистов, и поддерживаемых лишь IE это было нормально. Но этот случай достоин книги рекордов Гинесса, эксплорер поддерживает полезное CSS свойство, которого не поддерживают Gecko и все остальные.

Но хватит удивлений давайте разберемся, что же оно делает. Если вы посмотрите на эту страничку в IE 6. Вы увидите, что там, где во всех броузерах строка была просто обрезана, теперь появилось многоточие — "...". Если у вас нет эксплорера значит вам не повезло. Шутка. Вот скрин для тех кто ненавидит его настолько, что не хочет даже запускать:
text-overflow в IE 6
Свойство text-overflow может принимать только два значения.

clip
При этом строку постигает обычное обрезание. Как обычный overflow.
ellipsis
А с этим значением мы получаем многоточие при переполнении.

Очень полезным может оказаться это свойство для таблиц.

.ovfltable {
	table-layout:fixed;
	border-top: 5px solid #333;
	border-collapse: collapse;
	background: #fff;
	 }
.ovfltable td {
	border-bottom: 1px dashed #333;
	padding: 2px 5px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
 } 

Вот как это выглядит (best viewed with Internet Explorer 6 :) ):

<tr>
	<td>Никита Вакорин</td>

	<td><a href="http://www.umade.ru/" title="www.umade.ru">www.umade.ru</a></td>
	<td>Россия</td>
</tr>
<tr>
	<td>Denny</td>
	<td><a href="http://www.minimal.ru/" title="www.minimal.ru">www.minimal.ru</a></td>
	<td>Россия</td>

</tr>
</tbody>
Пионеры в русском цсс.
Имя Сайт Откуда
Андрей Смирнов www.ru.id-as.com Россия (Саров?)

Теперь необязательно подгонять ширину ячеек (правда лишь в IE 6). И по-моему с эстетической точки зрения очень даже смотрится. Когда я вижу многоточие на полуслове сразу понятно что строка обрезана.

Кстати если попытаться выделить многоточие, то на его месте появляется продолжение строки. Не всей, а той что заменена многоточием.

Вот такое свойство. И очень обидно, что его поддерживает лишь IE 6. Но надеюсь скоро мозилловцы учтут его.

Кстати если верить этой статистике, то IE6 это 70%.

Еще о том же:

10 комментариев к “text-overflow”

1.ganges | 26 Aug, 2004
Есть много друг Горацио такого: Не разделяю твой восторг от этого "свойства". Лучше бы ИЕ поддерживал все "вменяемые" properties как-то min-width, например, или псевдокласс :hover - нам бы было счастье ;)
2.akella | 26 Aug, 2004
Я просто надеюсь его включат куда нужно... Ладно с теми :hover, вот если б он не глючил при первой возможности... Вот это было б счастье.:) поосторожнее с кодировкой
3.alshur | 21 Nov, 2004
всё просто -- text-overflow не входит в w3c css стандарты, вот и не поддерживает его никто, кроме ie
4.netwizard | 21 Jan, 2005
http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props
5.Егоров | 13 Dec, 2006
Safari поддерживает text-overflow, также подддерживает opera как -o-text-overflow или около того. Для мозилки нашел вот такое: http://www.hedgerwow.com/360/dhtml/text_overflow/demo.php
6.Сергей | 17 Mar, 2008
Вроде и не очень так полезная статья, а только вспомнился случай один, когда на резиновом сайте клиент вставил ссылку настолько огромную, что в итоге она уехала за границы контентной области. (Не помню, может там даже прокрутка появилась). Тогда думал, как же сделать, чтобы красиво получилось. Сразу же пришла в голову мысль, чтобы сделать красивый переход в самом конце блока, как на Яндексе в почте обрезаются сообщения. Но потом отказался от этой идеи, потому что сложновато там было это реализовать (и времени не много было), поэтому программными средствами там затерли этот момент. Но сейчас снова задумался над таким вариантом =)
7.Сергей | 17 Mar, 2008
Сделал без графики решение для ИЕ, ФФ и Оперы. Правда меня подловили на том, что если текста мало и он никуда не вылазит, то многоточия быть не должно. =) Я конечно мог бы использовать графику, но в таком случае пришлось бы использовать разные картинки на разном фоне и ещё не рисунок многоточия, а какой-нибудь ПНГ, пореходящим из полупрозрачного в полноцветное изображение. Вот такие соображения =)
8.Сергей | 17 Mar, 2008
Ох, не смотря в ссылку как сделать под ФФ сделал похожий вариант =) В следующий раз буду внимательнее.
9.Joni Jones | 13 Jun, 2008
Очень даже полезное свойство. Использовал его ранее при построении крупных таблиц в одном веб-приложении.
10.all | 25 May, 2010
http://www.leechy.ru/howto/text-overflow/