Firefox и text-overflow

smoke1 · February 6, 2008

Решил разобраться со следующей темой - как реализовать в Firefox обрезание строки при переполнении с добавлением троеточия. В Эксплорере с этим нет проблем. Нужно только прописать в css "text-overflow:ellipsis;". Опера тоже проявила "оригинальность" - там можно добиться того же эффекта используя "-o-text-overflow:ellipsis;".

Нашел следующую страничку в интернете http://www.jide.fr/emulate-text-overflowel...irefox-with-css , где заявляется о решении данной проблемы в Firefox, используя только CSS. Но заставить это работать не получается. Вот мой пример: http://demo.oceanit.ru/csstest.html

Помогите пожалуйста разобраться.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<style type="text/css">
<!--
body {width:200px;}

.ellipsis span {
   white-space:nowrap;
   text-overflow:ellipsis; /* for internet explorer */
   overflow:hidden;
   width:190px;
   display:block;
}

html>body .ellipsis {
   clear:both;
}

html>body .ellipsis span:after {
   content: "...";
}

html>body .ellipsis span {
   max-width:180px;
   width:auto !important;
   float:left;
}
-->
</style>
</head>

<body>

</body>
  <div class="ellipsis">
	   <span>A very, very, very, very, very, very, very, very, very long text</span>

  </div>
</html>

PS. Варианты с использованием javascript просьба не предлагать.

Vlad · February 7, 2008

У меня в FF 2 все работает.

smoke1 · February 7, 2008

Если не сложно, можно ссылку на работающий пример?

Я на трех машинах проверял - не работает

P.S. Мой пример вчера не работал - ошибся со ссылкой. Исправил

guvatara · February 7, 2008

в версии 2.0.0.11 работает

smoke1 · February 7, 2008

guvatara said:
в версии 2.0.0.11 работает

Мой пример?? Чудеса.... у меня тоже версия 2.0.0.11.

И где я не проверял, нигде нет троеточия в конце...

Vlad · February 7, 2008

Ах, вот в чем дело, про троеточие ты не заикался. Текст обрезается, факт.

Попробуй так.

В стили

.ellipsis span.m {

overflow: auto;

}

.ellipsis span.m:after {

content: "...";

}

В HTML

A very, very, very, very, very, very, very, very, very long text

guvatara · February 7, 2008

А про троеточие действительно речи не было, я думал нужно чтоб просто обрезался и все.

smoke1 · February 7, 2008

Vlad said:
Попробуй так.

При таком варианте троеточие будет всегда. А надо, чтобы оно появлялось только при обрезании строки.

Похоже, что в Firefox, если сторока обрезается, то не показывается и элемент ":after".

Получается что этот метод вообще не должен работь.. ???!.

Vlad · February 7, 2008

Элемент after показывается, но он под нож ложится, поэтому многоточия и не видно.

klierik · February 7, 2008

text-overflow в Firefox и все, все, все

smoke1 · February 7, 2008

klierik said:
text-overflow в Firefox и все, все, все

Финальный вариант в этой статье всетаки использует javascript. Но главное, там есть решение для firefox c использованием чистого css. Спасибо за ссылку!!

klierik · February 7, 2008

я б, имхо, решал данную задачу по другому.

контейнер с текстом делал б релативом,

в него помещал текст, а под ним div абсолютный

у которого фоновое изображение - градиентный png

а его позиционировал в конец строки.

недавно была такая же задача.. реализовал через png

начальству понравилось больше

но под каждые нужды, естественно, свой способ

smoke1 · February 8, 2008

Немного изменил код и получилось следующее http://demo.oceanit.ru/csstest2.html

Работает в FF2, IE6, O9. К сожалению нету возможности проверить в IE7

Без использования javascript, только css.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
  <style type="text/css">

.ellipsis div {
   white-space:nowrap;
   text-overflow:ellipsis; /* for internet explorer */
   -o-text-overflow:ellipsis; /* for opera */
   overflow:hidden;
   width:190px;
}

html>body .ellipsis {
 line-height: 1.2em;
 height: 1.2em;
 white-space: nowrap;
 overflow: hidden;
}

.ellipsis > DIV:first-child {
 overflow: visible !important;
 width: auto !important;
 float: left;
}

.ellipsis > DIV + SPAN {
 display: block;
 float: right;
 margin-top: -1.2em;
}

.ellipsis > DIV + SPAN::after {
 background-color: white;
 content: '...';
}

  </style>
</head>

<body>
  <div style="width: 190px; border: 1px solid black;">
	<div class="ellipsis">
	  <div></div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefg</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefgh</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefghi</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefghij</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefghijk</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefghijkl</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefghijklm</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefghijklmn</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefghijklmno</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefghijklmnop</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefghijklmnopq</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefghijklmnopqr</div>
	  <span></span>
	</div>
	<div class="ellipsis">
	  <div>0123456789 abcdefghijklmnopqrs</div>
	  <span></span>
	</div>
  </div>
</body>
</html>

Sign In

Firefox и text-overflow

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information