Многострочное переполнение текста: многоточие в CSS или JS, с тегами img - PullRequest
Новая
       44

Многострочное переполнение текста: многоточие в CSS или JS, с тегами img

6 голосов
/ 06 января 2012

Я пытался использовать:

Все эти инструменты работают довольно хорошо, но если у контента есть изображения, рассчитанная высота для усечения с помощью dotdotdot или jquery.autoellipsis неверна.

Мне просто интересно, есть ли у кого-то отличная идея для решения этой проблемы (может быть, какая-то обработка на стороне сервера?), Спасибо заранее: -).

Ответы [ 2 ]

0 голосов
/ 08 сентября 2014

Если вам нужна поддержка X-Browser (не только для Opera и Webkit, как объяснил @ c69).

Я нашел более причудливый способ.Но также для ручной настройки.

посмотрите на рабочий пример на jsfiddle .

HTML 

<p>
    Lorem ipsum dolor sit amet, consectetur
</p>

css 

p {
    height: 3.7em;
    position: relative;
    overflow: hidden;
    width: 235px;
}

p:after{
    /* works since IE10 , ff16, chrome26, safari6.1,opera12, android4.4 ; previouse browser need prefixes */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,2055,255,1) 30%); 
    /* for IE9,IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); 
    bottom: 0;
    content: "...";
    float:right;
    padding-left: 10px;
    position: absolute;
    right: 0;
}

Источник:
1 моб
2 css-трюка

0 голосов
/ 23 августа 2012

Используйте свои собственные смещения для многоточия, установив фиксированную высоту для многострочного div, а затем установив абсолютное позиционирование img и многоточия для упрощения сценария. Смещение вправо зависит от font-size и кернинга отдельных букв каждого предложения, поэтому проб и ошибок не требуется, если не используется моноширинный шрифт. Базовая структура выглядит примерно так: 

<style type="text/css">
.truncate { position: absolute; top: 20px; right: 6px; background-color: #fff; }
.lineup { top: 6px; }
.monalisa { position: absolute; top: 2px; left: -18px; }
.wrapper { position: relative; width: 360px }
.textblob { width: 330px; height: 30px; }
</style>
<!--...-->
<div class="wrapper">
  <img class="monalisa" src="hppt://www.stackoverflow.com/favicon.ico" alt="SO"/>
  <div class="textblob">
    <span class="truncate">…</span>
    <span class="snippet">blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</span>
  </div>
</div>
...