Свойство CSS3 Text-overflow в деталях

Внедрение CSS3 влечет за собой революционные изменения в ежедневные будни веб дизайнеров. CSS3 не перестает нас удивлять каждый день. Вещи, которые раньше можно было сделать только с помощью javascript, теперь легко делаются с CSS3. Так, например, свойство Text-Overflow.

Иногда в процессе создания сайтов нам необходимо спрятать часть динамического текста без перехода на следующую строку. То есть вставить длинный текст в таблицу с фиксированной шириной. В то же время, необходимо показать пользователю, что видимая часть текста - это еще не все. Есть еще и скрытая часть. Подобное можно показать с помощью троеточия (...).

С CSS3 мы можем легко это осуществить, используя свойство CSS text-overflow

Разметка

text-overflow: ellipsis;

Значение ellipsis позволяет после текста добавить троеточие (...)

Свойство text-overflow: ellipsis полезно когда:

1. Текст выходит за пределы ячейки
2. В ячейке есть свободное пространство: nowrap.

У нас есть div c шириной 150 пикселей для отображения названия компаний из базы данных. Но при этом мы не хотим, чтобы длинные названия компаний перескакивали на новую строку и портили внешний вид таблицы. То есть нам необходимо спрятать текст, которые выходит за границы 150 пикселей. Мы также хотим сообщить пользователю об этом. Чтобы он имел ввиду, что отображается не все название. И мы хотим, чтобы при наведении мышки, отображался весь текст.

Давайте взглянем как мы можем это сделать с помощью CSS3.

.company-wrap ul li {  
text-overflow: ellipsis;
overflow: hidden;
white-space:nowrap; }

HTML

   
  <div class="company-wrap">
<ul>
<li class="table-head">Company Name</li>
<li title="Envestnet Asset Management">Envestnet Asset Management</li>
<li>Russell Investments</li>
<li title="Northwestern Mutual Financial Network">Northwestern Mutual Financial Network</li>
<li>ING Financial Networks</li>
</ul>
</div>

Поддержка браузеров

С поддержкой среди браузеров у данного свойства есть один маленький ньюанс. Все, кроме firefox, отлично отображают верно. Но, к счатью, есть решение и этой проблемы!

Троеточие в Firefox

К сожалению, gecko (движок вывода страниц в ) Firefox не поддерживает это свойство. Однако данный браузер поддерживает XBL, с помощью которого мы и будем выходить из данной ситуации.

Gecko — это свободный движок вывода веб-страниц (англ. layout engine) браузеров Mozilla Firefox, Netscape и других. Старые названия — «Raptor» и «NGLayout». Главная концепция Gecko заключается в поддержке открытых стандартов Интернета, таких как HTML, CSS, W3C DOM, XML 1.0 и JavaScript. Другая концепция — кросс-платформенность. На сегодняшний день Gecko работает на операционных системах Linux, Mac OS X, FreeBSD и Microsoft Windows, а также на Solaris, HP-UX, AIX, Irix, OS/2, OpenVMS, BeOS, Amiga и других.[1]

Для отображения троеточия в firefox, нам необходимо добавить одну строку в таблицу стилей.

-moz-binding: url( 'bindings.xml#ellipsis' );

если захотите свойство отключить, просто добавьте:


-moz-binding: url( 'bindings.xml#none' );  

Следующий шаг - создание файла bindings.xml в том же месте, где хранится таблица стилей. Мы можем использовать любой текстовый редактор для этого! Скопируйте код ниже и назовите файл bindings.xml.

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">


<binding id="none">


<content><children/></content>

</binding>


<binding id="ellipsis">

<content>
<xul:label crop="end"><children/></xul:label>
</content>
<implementation>
<field name="label"> document.getAnonymousNodes( this )[ 0 ] </field>
<field name="style"> this.label.style </field>
<property name="display">
<getter> this.style.display </getter>
<setter> if( this.style.display != val ) this.style.display= val </setter>
</property>
<property name="value">
<getter> this.label.value </getter>
<setter> if( this.label.value != val ) this.label.value= val </setter>
</property>
<method name="update">
<body>
var strings= this.textContent.split( /\s+/g )
if( !strings[ 0 ] ) strings.shift()
if( !strings[ strings.length - 1 ] ) strings.pop()
this.value= strings.join( ' ' )
this.display= strings.length ? '' : 'none'
</body>
</method>
<constructor> this.update() </constructor>
</implementation>
<handlers>
<handler event="DOMSubtreeModified"> this.update() </handler>
</handlers>
</binding>

</bindings>

Окончательный код для всех браузеров

.company-wrap ul li {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url( 'bindings.xml#ellipsis' );
white-space: nowrap;
overflow: hidden;
}

CSS3 становится главным инструментов веб дизайнера по всему миру для создания невиданных ранее сайтов с минимум кода. Существуют простые, буквально в одну строку, решения, которые ранее были возможны только с помощью Photoshop или javascript. Начните изучение возможностей CSS3 и HTML5 сегодня и Вы не пожалеете!

Чтобы выделяться из серой массы переводчиков и завоевать Ваши симпатии, уважаемые читатели, в конце моих уроков будут мудрые мысли и афоризмы. Каждый в этих строках найдет что-то свое :)

Переноси с достоинством то, что изменить не можешь. 

Сенека

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://deepubalan.com/blog/2010/11/27/text-overflow-css3-property-explained-pure-css-solution-to-get-ellipsis/
Перевел: Максим Шкурупий
Урок создан: 9 Февраля 2011
Просмотров: 35880
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 9 Февраля 2011 15:51
    Шамиль Ниматулаев
    исправьте переносы строк в коде :)
  • 9 Февраля 2011 17:12
    OdinecDenis
    спасибо)) за афоризм
  • 10 Февраля 2011 12:31
    kalisto
    Начните изучение возможностей CSS3 и HTML5 сегодня и Вы не пожалеете! Отличная идея!!! Постараюсь конечно, но может быть кто-то успеет из нас начать изучать и давать уроки по CSS3 и HTML5. Вы уже начали (за что большое спасибо) - если не сложно Вам, то можно структурно давать уроки по CSS3 и HTML5 - поэтапно...? Просьба скромная - потому как Вы итак много нам даете.
    • 4 Июня 2011 09:43
      enterlive
      Да, действительно хотелось бы увидеть побольше таких уроков.
  • 15 Февраля 2011 11:11
    koldyn
    нам дают мало, точнее копипастят, я месяц назад выслал урок интересный, до сих пор его не выложили!
^ Наверх ^