Урезаем текст средствами CSS, часть II

Как мне справедливо подсказали в предыдущей заметке большинство современных браузеров поддерживает свойство text-overflow, позволяющее добиться того, что я сделал в предыдущем примере одной строкой. Работает для всех браузеров, кроме FireFox, у него таких стилей нет.

Я модифицировал предыдущий пример так, чтобы он работал в FireFox и сделал для остальных браузеров поддержку через их родные свойства. Получилось несколько громоздко, но это первый в интернете пример, работающий без JavaScript:

<style type="text/css">
body { background: white; color: black; font-family: Arial; font-size: 16px }

.crop div div
{
    text-overflow: ellipsis;    /* Internet Explorer 6.0 и выше, Safari, Konqueror */
    -o-text-overflow: ellipsis; /* Opera 9.0TP1 и выше */
    white-space: nowrap;
    width: 100%;                /* для IE */
    overflow: hidden;
}

.crop ins, .crop del { display: none } /* скрываем свои хаки от остальных браузеров */

/* стили только для FF, см. /all/1623 */
@-moz-document url-prefix()
{ 
    /* ширина «…» — 16px, высота строки — 18px */
    .crop          { overflow: hidden; height: 18px; width: 100% }
    .crop div      { clear: none; float: left }
    .crop div div  { white-space: nowrap; overflow: hidden; margin-right: 16px; width: auto}
    .crop ins      { float: right; margin-left: -16px }

    /* margin делаем на -1px уже, чем ширина «…», чтобы блок «свалился» чуть раньше */
    .crop del      { float: right; color: white; background: white; width: 16x; margin-left: -15px }
    .crop del, .crop ins { display: block; text-decoration: none }
}
</style>
<div style="max-width: 700px; margin-left: 10px">

<div class="crop">
<div>
    <div>Who let the dogs out (woof, woof, woof, woof)!</div>
    <ins>&hellip;</ins> 
    <del>&hellip;</del>
</div>
</div>

</div>

Вот такая эмуляция text-overflow в FireFox.