Суть: необходимо установить чёткие размеры колонок таблицы, так чтобы текст не вылазил за пределы (за границы) этой таблицы.

Во всех браузерах, кроме Оперы, это делается установкой простого стиля таблицы:
<table width=100% style="table-layout:fixed; overflow:hidden">. Это не работает в Опере, она не воспринимает ширину, растягивая таблицу до беспредельного состояния, и разумеется, не скрывая содержимое вылезшее за границу. (Кстати, по этой причине, этот самый сайт некорректно отображался в Опере недели две или три, а я как-то не удосужился потестировать его.)

Короче, мне было лень выяснять причину, в гуглах-интернетах прочитал о том что это известных баг с overflow: hidden, но решения этого вопроса нигде не нашёл, поэтому пришлось извращаться самостоятельно.

Всё оказалось тупо но довольно просто.:)

Если Opera игнорирует width: 100%, не растягивая элемент по ширине родителя, хрен с ней, зададим ширину, 10 пикселов например, и пусть содержимое вылазит за пределы этих пикселов. А резать по нужной ширине будет внешний элемент:

<table width=100% style="table-layout: fixed; overflow: hidden;">
  <tr>
    <td style="overflow:hidden"> <!--вот этот overflow:hidden всё решает-->
       <div style="white-space:nowrap;width:100px;">Три мудреца в одном тазу пустились по морю в грозу. Будь попрочнее медный таз — длиннее был бы мой рассказ.</div>
      </td>
  </tr>
</table>

Результат:

Три мудреца в одном тазу пустились по морю в грозу. Будь попрочнее медный таз — длиннее был бы мой рассказ.

 …another cell

Если кому-то это оказалось полезным — оставьте коммент.:)

————————————

Цей документ було скопійовано з FAVOR.com.ua (https://favor.com.ua/blogs/3239.html).
Всі права на матеріал зберігаються за його автором. При перепублікуванні посилання на джерело матеріалу є обов’язковим!
Дата документу: 29 листопада 2010 р.