Помогите немного с CSS

[Damasc]

Сразу хочу сказать, что совсем не понимаю в CSS и разбираться в данный момент нет времени совсем, но обязательно разберусь.
Есть следующий CSS

    .ellipsis
    {
      line-height: 1.2em;
      height: 1.2em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      -o-text-overflow: ellipsis;
    }
    .ellipsis *
    {
      display: inline;
    }

Он скрывает текст, если тот не влезает в блок. Мне нужно в конец строки поставить полупрозрачный градиент за котором будет скрываться текст. Можно чтобы он там стоял при любом условии, даже если текст не доходит до него. Картинка уже есть, но поставить не получается ну никак.
После того как всё выясним, эту тему можно будет удалить. Спасибо!

 

[zzallexx]

если правельно понял у меня так сделано

li .shadow {position: absolute; height: 100px; width: 27px; background: url(../images/new-shadow.png) no-repeat 0px 0px; top: 0px; right: 0px; _background: none;}

a сам html такой

<li>
      <div class="shadow"></div>
        <dl>
    <dt></dt>
    <dd></dd>
  </dl></li>

а вообще надо твой html тоже смотреть

 

[Damasc]

Данное решение было взято от сюда:

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

Немного упрощено. Мне нужно всего навсего приделать к этому коду градиент к концу строки. Меня даже устроит если градиент там будет постоянно, а не будет появляться только тогда, когда текст упирается в границу.

 

[zzallexx]

а если просто бакграундом прописать рисунок не подойдет?

.ellipsis 
    { 
      line-height: 1.2em; 
      height: 1.2em; 
      white-space: nowrap; 
      overflow: hidden; 
      text-overflow: ellipsis; 
      width: 100%; 
      -o-text-overflow: ellipsis;
    background: url(../images/ellipsis.png);
     background-repeat:repeat-y;
     background-position:right;
    }

 

[Damasc]

а если просто бакграундом прописать рисунок не подойдет?

.ellipsis 
    { 
      line-height: 1.2em; 
      height: 1.2em; 
      white-space: nowrap; 
      overflow: hidden; 
      text-overflow: ellipsis; 
      width: 100%; 
      -o-text-overflow: ellipsis;
    background: url(../images/ellipsis.png);
     background-repeat:repeat-y;
     background-position:right;
    }

Нет, так к сожалению не работает.

 

[LodeRunner]

Автор, почему бекграундом то у тебя не получается сделать картинку png?
Прописываешь
background: url(путь к картинке) top right repeat-y;
Должно работать.

Поясню некоторые моменты твоего css кода:
width: 100%; Это ты растягиваешь блок по ширине на весь экран.
line-height: 1.2em; Это интерлиньяж, т.е. высота строки.
height: 1.2em; Это высота блока.
При этом текст будет центрироваться по высоте блока, т.к. высота блока и высота строки одинаковые.
overflow: hidden; это свойство обрезает твой непереносной(white-space: nowrap текст.

 

[Damasc]

Да действительно, заработало.

Только как картинку сделать поверх текста? Она у меня легла под текст.

 

[borman256]

Правильно, у тебя в css написано background, а это означает как задний фон! Вопрос, а зачем тебе картинка поверх текста? Это не логично!

 

[Damasc]

Хм, хорошо ) но как будет всё таки верно?

Трём уже 3й день эту и никто не знает как это реализовать? )

 

[bork75]

Что бы изображение было поверх, нужно выводить в плавающем диве, внутри основного дива.

<div class="shadow">
    <div style="position:absolute; top:50px; left:0px; z-index:999;">
     <img src="сюда вписать картинку">
    </div>
</div>

Из основного стиля убрать

background: url(../images/new-shadow.png) no-repeat 0px 0px;