ile

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Taşmışsa satırın sonunda "..." gösterilir. Ancak, bu yalnızca bir satırda gösterilecektir. Ama çok satırlı olarak gösterilmesini istiyorum.

Şöyle görünebilir:

+--------------------+
|abcde feg hij   dkjd|
|dsji jdia js ajid  s|
|jdis ajid dheu d ...|/*Here it's overflowed, so "..." is shown. */
+--------------------+

Bu sorunla ilgilenen birkaç jquery eklentisi de vardır, ancak birçoğu birden fazla metin satırını işlemez. Aşağıdaki çalışmalar:

• http://pvdspek.github.com/jquery.autoellipsis/
• http://dotdotdot.frebsite.nl/
• http://keith-wood.name/more.html
• http://github.com/tbasse/jquery-truncate

Bazı performans testleri de var .

Buna yakın bir şey başarmayı başarana kadar hacklendim. Birkaç uyarı ile birlikte gelir:

1. Saf CSS değil; birkaç HTML öğesi eklemeniz gerekir. Ancak JavaScript gerekmez.
2. Üç nokta son satırda sağa hizalanır. Bu, metniniz sağa hizalanmamış veya haklı değilse, son görünür kelime ile üç nokta arasında (ilk gizli kelimenin uzunluğuna bağlı olarak) fark edilebilir bir boşluk olabileceği anlamına gelir.
3. Üç nokta için alan her zaman ayrılmıştır. Bu, metin kutuya neredeyse tam olarak sığarsa, gereksiz yere kesilmiş olabileceği anlamına gelir (teknik olarak zorunlu olmasa da son kelime gizlidir).
4. Gerekmediği durumlarda üç noktaya gizlemek için renkli dikdörtgenler kullandığımız için metninizin sabit bir arka plan rengine sahip olması gerekir.

Ayrıca metnin bir karakter sınırında değil, bir kelime sınırında kırılacağını da not etmeliyim. Bu kasıtlıydı (daha uzun metinler için daha iyi olduğunu düşündüğüm için), ama ne olduğundan farklı olduğu için text-overflow: ellipsisbundan bahsetmem gerektiğini düşündüm.

Bu uyarılarla yaşayabiliyorsanız, HTML şöyle görünür:

<div class="ellipsify">
    <div class="pre-dots"></div>
    <div class="dots">&hellip;</div>
    <!-- your text here -->
    <span class="hidedots1"></span>
    <div class="hidedots2"></div>
</div>

Ve bu, beyaz zemin üzerinde üç satır metin içeren 150 piksel genişliğinde bir kutu örneğini kullanan karşılık gelen CSS'dir. Gerektiğinde kenar boşluklarını ve dolguları sıfıra ayarlayan bir CSS sıfırlama veya benzerine sahip olduğunuzu varsayar.

/* the wrapper */
.ellipsify {
    font-size:12px;
    line-height:18px;
    height: 54px;       /* 3x line height */
    width: 150px;
    overflow: hidden;
    position: relative; /* so we're a positioning parent for the dot hiders */
    background: white;
}

/* Used to push down .dots. Can't use absolute positioning, since that
   would stop the floating. Can't use relative positioning, since that
   would cause floating in the wrong (namely: original) place. Can't 
   change height of #dots, since it would have the full width, and
   thus cause early wrapping on all lines. */
.pre-dots {
    float: right;
    height: 36px;  /* 2x line height (one less than visible lines) */
}

.dots {
    float: right; /* to make the text wrap around the dots */
    clear: right; /* to push us below (not next to) .pre-dots */
}

/* hides the dots if the text has *exactly* 3 lines */
.hidedots1 {
    background: white;
    width: 150px;
    height: 18px;       /* line height */
    position: absolute; /* otherwise, because of the width, it'll be wrapped */
}

/* hides the dots if the text has *less than* 3 lines */
.hidedots2 {
    background: white; 
    width: 150px;
    height: 54px;       /* 3x line height, to ensure hiding even if empty */
    position: absolute; /* ensures we're above the dots */
}

Sonuç şuna benzer:

Nasıl çalıştığını açıklığa kavuşturmak için, burada aynı görüntü, .hidedots1kırmızı ve .hidedots2camgöbeği ile vurgulanmıştır. Bunlar, görünmez metin olmadığında üç noktayı gizleyen dikdörtgenlerdir:

IE9, IE8 (taklit edilmiş), Chrome, Firefox, Safari ve Opera'da test edilmiştir. IE7'de çalışmaz.

İşte bu konuyu tartışan yeni bir css-tricks makalesi .

Yukarıdaki makalede (burada bahsedilmeyen) bazı çözümler

1) -webkit-line-clampve 2) Tamamen yerleştirilmiş bir elemanı sol altta olacak şekilde sağ alt kısma yerleştirin

Her iki yöntem de aşağıdaki işaretlemeyi varsayar:

<div class="module"> /* Add line-clamp/fade class here*/
  <p>Text here</p>
</div>

css ile

.module {
  width: 250px;
  overflow: hidden;
}

1) -webkit-line-kelepçe

hat kelepçesi FIDDLE (.. maksimum 3 satır için)

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  max-height: 3.6em; /* I needed this to get it to work */
}

2) kaybolmak

Diyelim ki satır yüksekliğini 1.2em olarak ayarladınız. Üç satır metni ortaya koymak istiyorsak, kabın yüksekliğini 3.6em (1.2em × 3) yapabiliriz. Gizli taşma gerisini gizler.

Yavaş yavaş FIDDLE

p
{
    margin:0;padding:0;
}
.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.fade {
  position: relative;
  height: 3.6em; /* exactly three lines */
}
.fade:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

Çözüm # 3 - @supports kullanan bir kombinasyon

Webkit tarayıcılarına webkit'in satır kıskacını uygulamak ve diğer tarayıcılarda solmaya uygulamak için @supports'u kullanabiliriz.

@ solma düşme kemanlı hat kelepçesini destekler

<div class="module line-clamp">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS

.module {
  width: 250px;
  overflow: hidden;
  border: 1px solid green;
  margin: 10px;
}

.line-clamp {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
.line-clamp:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
 }

@supports (-webkit-line-clamp: 3) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        max-height:3.6em; /* I needed this to get it to work */
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

Aşağıdaki bağlantı, bu soruna saf bir HTML / CSS çözümü sağlar.

Tarayıcı desteği - makalede belirtildiği gibi:

Şimdiye kadar Safari 5.0, IE 9 (standartlar modunda olmalı), Opera 12 ve Firefox 15 üzerinde test yaptık.

Yerleşimin eti normal konumlandırma, kenar boşluğu ve dolgu özelliklerinde olduğundan, eski tarayıcılar hala oldukça iyi çalışacaktır. platformunuz daha eskiyse (örn. Firefox 3.6, IE 8), yöntemi kullanabilir ancak degradeyi bağımsız bir PNG resmi veya DirectX filtresi olarak yeniden yapabilirsiniz.

http://www.mobify.com/dev/multiline-ellipsis-in-pure-css

css:

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;

    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

html:

<div class="ellipsis">
    <div>
        <p>Call me Ishmael.  Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.  It is a way I have of driving off the spleen, and regulating the circulation.  Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>  
    </div>
</div>

keman

(tarayıcı penceresini test için yeniden boyutlandır)

Metin taşması için W3 spesifikasyonlarına baktıktan sonra , bunun sadece CSS kullanarak mümkün olduğunu düşünmüyorum. Üç nokta yeni bir özelliktir, bu nedenle henüz henüz çok fazla kullanım veya geri bildirim almamıştır.

Ancak, bu adam benzer (veya aynı) bir soru sormuş gibi görünüyor ve birisi güzel bir jQuery çözümü bulabildi. Çözümü burada gösterebilirsiniz: http://jsfiddle.net/MPkSF/

Javascript bir seçenek değilse, şanssız olabilir düşünüyorum ...

Tamlık uğruna bu soruya eklemek istiyorum.

• Opera, -o-elips-lastline adı verilen standart olmayan bir desteğe sahiptir .
• dotdotdot tavsiye edebileceğim harika bir jQuery eklentisidir.

Harika bir soru ... Keşke bir cevap olsaydı, ama bu günlerde CSS ile alabileceğiniz en yakın şey bu. Üç nokta yok, ama yine de oldukça kullanışlı.

overflow: hidden;
line-height: 1.2em;
height: 3.6em;      // 3 lines * line-height

Oldukça iyi çalışan bu css (scss) çözüm buldum. Webkit tarayıcılarda üç nokta gösterir ve diğer tarayıcılarda sadece metni kısaltır. Hangi benim kullanım için iyidir.

$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 3;

h2 {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: $font-size;
  line-height: $line-height;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Yaratıcı tarafından bir örnek: http://codepen.io/martinwolf/pen/qlFdp

İşte sadece css kullanarak alabilirim en yakın çözüm.

HTML

<div class="ellipsis"> <span>...</span>
Hello this is Mr_Green from Stackoverflow. I love CSS. I live in CSS and I will never leave working on CSS even my work is on other technologies.</div>

CSS

div {
    height: 3em;
    line-height: 1.5em;
    width: 80%;
    border: 1px solid green;
    overflow: hidden;
    position: relative;
}
div:after {
    content:". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .  . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    background-color: white;
    color: white;
    display: inline;
    position: relative;
    box-shadow: 8px 1px 1px white;
    z-index: 1;
}
span {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: white;
}

Working Fiddle ( kontrol etmek için pencereyi yeniden boyutlandırın )

Açıklama için bloguma bağlantı

Güncellenmiş Keman

Umarım şimdi bazı css uzmanı nasıl mükemmel hale getirileceği konusunda fikir sahibi olur. :)

Burada birçok cevap var ama bir tane ihtiyacım vardı:

• Yalnızca CSS
• Geleceğe hazır (zamanla daha uyumlu hale gelir)
• Kelimeleri parçalamayacak (sadece boşlukları kıracak)

Uyarı, -webkit-line-clampkuralı desteklemeyen tarayıcılar (şu anda IE, Edge, Firefox) için bir üç nokta sağlamaz , ancak metnini soldurmak için bir degrade kullanır.

.clampMe {
  position: relative;
  height: 2.4em; 
  overflow: hidden;
}

.clampMe:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em; /* Just use multiples of the line-height */
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%);
}

/* Now add in code for the browsers that support -webkit-line-clamp and overwrite the non-supportive stuff */
@supports (-webkit-line-clamp: 2) {
  .clampMe {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
  }
  
  .clampMe:after {
    display: none;
  }
}

<p class="clampMe">There's a lot more text in here than what you'll ever see. Pellentesque habitant testalotish morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Bu CodePen içinde eylem görebilirsiniz ve ayrıca burada bir Javascript sürümü görebilirsiniz (jQuery yok).

Bu partiye biraz geç kaldım ama bence, benzersiz bir çözüm. Css hile veya js üzerinden kendi üç nokta eklemek için çalışıyorum yerine ben denemek ve tek satır kısıtlama ile rulo düşündüm. Bu yüzden metni her "satır" için çoğaltırım ve yalnızca bir satırın son satırın durduğu yerden başlamasını sağlamak için negatif bir metin girintisi kullanırım. VAKTİNİ BOŞA HARCAMAK

CSS:

#wrapper{
    font-size: 20pt;
    line-height: 22pt;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.text-block-line{
    height: 22pt;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}
.text-block-line:last-child{
    text-overflow: ellipsis;
}

/*the follwing is suboptimal but neccesary I think. I'd probably just make a sass mixin that I can feed a max number of lines to and have them avialable. Number of lines will need to be controlled by server or client template which is no worse than doing a character count clip server side now. */
.line2{
    text-indent: -100%;
}
.line3{
    text-indent: -200%;
}
.line4{
    text-indent: -300%;
}

HTML:

<p id="wrapper" class="redraw">
    <span class="text-block-line line1">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line2">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line3">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
    <span class="text-block-line line4">This text is repeated for every line that you want to be displayed in your element. This example has a max of 4 lines before the ellipsis occurs. Try scaling the preview window width to see the effect.</span>
</p>

Kemanda daha fazla detay. Tarayıcı için bir JS yeniden çizme kullandığınızı reddeden bir sorun var ve böyle kontrol edin ama bu temel kavram. Herhangi bir düşünce / öneri çok takdir edilmektedir.

teşekkürler @balpha ve @Kevin, iki yöntemi bir araya getiriyorum.

bu yöntemde js gerekmez.

background-imagenoktaları gizlemek için kullanabilirsiniz ve degrade gerekmez.

innerHTMLarasında .ellipsis-placeholdergerekli değildir, kullandığım .ellipsis-placeholderile aynı genişlik ve yükseklik tutmak .ellipsis-more. Bunun display: inline-blockyerine kullanabilirsiniz .

.ellipsis {
    overflow: hidden;
    position: relative;
}
.ellipsis-more-top {/*push down .ellipsis-more*/
    content: "";
    float: left;
    width: 5px;
}
.ellipsis-text-container {
    float: right;
    width: 100%;
    margin-left: -5px;
}
.ellipsis-more-container {
    float: right;
    position: relative;
    left: 100%;
    width: 5px;
    margin-left: -5px;
    border-right: solid 5px transparent;
    white-space: nowrap;
}
.ellipsis-placeholder {/*keep text around ,keep it transparent ,keep same width and height as .ellipsis-more*/
    float: right;
    clear: right;
    color: transparent;
}
.ellipsis-placeholder-top {/*push down .ellipsis-placeholder*/
    float: right;
    width: 0;
}
.ellipsis-more {/*ellipsis things here*/
    float: right;
}
.ellipsis-height {/*the total height*/
    height: 3.6em;
}
.ellipsis-line-height {/*the line-height*/
    line-height: 1.2;
}
.ellipsis-margin-top {/*one line height*/
    margin-top: -1.2em;
}
.ellipsis-text {
    word-break: break-all;
}

<div class="ellipsis ellipsis-height ellipsis-line-height">
    <div class="ellipsis-more-top ellipsis-height"></div>
    <div class="ellipsis-text-container">
        <div class="ellipsis-placeholder-top ellipsis-height ellipsis-margin-top"></div>
        <div class="ellipsis-placeholder">
           <span>...</span><span>more</span>
        </div>
        <span class="ellipsis-text">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </span>
    </div>
    <div class="ellipsis-more-container ellipsis-margin-top">
        <div class="ellipsis-more">
            <span>...</span><span>more</span>
        </div>
    </div>
</div>

jsfiddler

javascript çözümü daha iyi olacak

• metin satır sayısını al
• Geçiş is-ellipsissınıf eğer pencere boyutlandırma veya Elment değişiklik

getRowRects

Element.getClientRects()gibi çalışır bu

Aynı satırda her rects aynı sahiptir topdeğeri, çok farklı olan rects öğrenmek topgibi, değer bu

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

şamandıra ...more

gibi bu

pencere yeniden boyutlandırmasını algıla veya öğe değişti

gibi bu

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; 

daha fazla görmek buraya tıklayın

-webkit-line-clamp üzerinde saf bir css yöntemi tabanı:

@-webkit-keyframes ellipsis {/*for test*/
    0% { width: 622px }
    50% { width: 311px }
    100% { width: 622px }
}
.ellipsis {
    max-height: 40px;/* h*n */
    overflow: hidden;
    background: #eee;

    -webkit-animation: ellipsis ease 5s infinite;/*for test*/
    /**
    overflow: visible;
    /**/
}
.ellipsis .content {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    font-size: 50px;/* w */
    line-height: 20px;/* line-height h */
    color: transparent;
    -webkit-line-clamp: 2;/* max row number n */
    vertical-align: top;
}
.ellipsis .text {
    display: inline;
    vertical-align: top;
    font-size: 14px;
    color: #000;
}
.ellipsis .overlay {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /**
    overflow: visible;
    left: 0;
    background: rgba(0,0,0,.5);
    /**/
}
.ellipsis .overlay:before {
    content: "";
    display: block;
    float: left;
    width: 50%;
    height: 100%;

    /**
    background: lightgreen;
    /**/
}
.ellipsis .placeholder {
    float: left;
    width: 50%;
    height: 40px;/* h*n */

    /**
    background: lightblue;
    /**/
}
.ellipsis .more {
    position: relative;
    top: -20px;/* -h */
    left: -50px;/* -w */
    float: left;
    color: #000;
    width: 50px;/* width of the .more w */
    height: 20px;/* h */
    font-size: 14px;

    /**
    top: 0;
    left: 0;
    background: orange;
    /**/
}

<div class='ellipsis'>
    <div class='content'>
        <div class='text'>text text text text text text text text text text text text text text text text text text text text text </div>
        <div class='overlay'>
            <div class='placeholder'></div>
            <div class='more'>...more</div>
        </div>
    </div>
</div>

Bir javascript hile buldum, ancak dize uzunluğunu kullanmak zorunda. 3 satır genişliğinde 250 piksel istediğinizi varsayalım, satır başına uzunluğu hesaplayabilirsiniz.

//get the total character length.
//Haha this might vary if you have a text with lots of "i" vs "w"
var totalLength = (width / yourFontSize) * yourNumberOfLines

//then ellipsify
function shorten(text, totalLength) {
    var ret = text;
    if (ret.length > totalLength) {
        ret = ret.substr(0, totalLength-3) + "...";
    }
    return ret;
}