ikinci satırda css üç nokta

CSS text-overflow: ellipsisİkinci satırda , bu mümkün mü? İnternette bulamıyorum.

misal:

ne istiyorum böyle:

I hope someone could help me. I need 
an ellipsis on the second line of...

ama olan şu:

I hope someone could help me. I ... 

text-overflow: ellipsis;Çalışmak için bir gereksinim , white-space( pre, nowrapvb.) 'Nin tek satırlık bir sürümüdür . Bu, metnin asla ikinci satıra ulaşmayacağı anlamına gelir.

Ergo. Saf CSS'de mümkün değil.

Tam olarak aynı şeyi ararken kaynağım : http://www.quirksmode.org/css/textoverflow.html (Quirksmode ftw!)

DÜZENLEME İyi CSS tanrıları http://www.w3.org/TR/css-overflow-3/#max-lines uygulayacaksa , fragments(yeni) ve max-lines(yeni) kullanarak saf CSS'de buna zarar verebiliriz . Ayrıca http://css-tricks.com/line-clampin/ hakkında daha fazla bilgi

DÜZENLEME 2 WebKit / Blink line-clamp: -webkit-line-clamp: 22. çizgiye üç nokta yerleştirir

Bu , webkit tarayıcılarında çalışmalıdır :

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Diğerlerinin zaten cevapladığı gibi, saf bir CSS çözümü mevcut değildir. Kullanımı çok kolay bir jQuery eklentisi var, buna dotdotdot denir . Üç nokta kesip kırpması gerekip gerekmediğini hesaplamak için kabın genişliğini ve yüksekliğini kullanır.

$("#multilinedElement").dotdotdot();

İşte bir jsFiddle .

Skeep'in cevabının yeterli olmadığını ve bir overflowstile de ihtiyaç duyduğunu buldum :

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;

Birisi SASS / SCSS kullanıyorsa ve bu soru üzerine tökezliyorsa - belki de bu karışım yardımcı olabilir:

@mixin line-clamp($numLines : 1, $lineHeight: 1.412) {
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  display: block;
  /* autoprefixer: off */
  display: -webkit-box;
  -webkit-line-clamp: $numLines;
  -webkit-box-orient: vertical;
  max-height: $numLines * $lineHeight + unquote('em');
}

bu sadece webkit tarayıcılarında üç nokta ekler. dinlenme sadece keser.

Bunu destekleyen tarayıcılar için (çoğu modern tarayıcı) hat kelepçesini kullanın ve daha yaşlı olanlar için 1 satıra geri dönün.

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


    @supports (-webkit-line-clamp: 2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

İki hat üzerinde çalışamayacağınız için ne yazık! Eleman ekran bloğu ve 2em ya da başka bir yüksekliğe ayarlanmış olsaydı harika olurdu ve metin taştığında bir üç nokta gösterecekti!

Tek bir astar için şunları kullanabilirsiniz:

.show-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Birden fazla satır için, github'da bulunan jQuery autoellipsis gibi bir Polyfill kullanabilirsiniz http://pvdspek.github.com/jquery.autoellipsis/

Ben JS profesyonel değilim, ama bunu yapabilmek için birkaç yol buldum.

HTML:

<p id="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum consequat tortor et euismod. Nam commodo consequat libero vel lobortis. Morbi ac nisi at leo vehicula consectetur.</p>

Daha sonra jQuery ile belirli bir karakter sayısına kısalırsınız, ancak son sözcüğü şu şekilde bırakırsınız:

// Truncate but leave last word
var myTag = $('#truncate').text();
if (myTag.length > 100) {
  var truncated = myTag.trim().substring(0, 100).split(" ").slice(0, -1).join(" ") + "…";
  $('#truncate').text(truncated);
}

Sonuç şuna benzer:

Lorem ipsum dolor sit amet, seçkin adipiscing elit. Morbi
elementum sonucu tortor et…

Veya, bunu aşağıdaki gibi belirli bir karakter sayısına kısaltabilirsiniz:

// Truncate to specific character
var myTag = $('#truncate').text();
if (myTag.length > 15) {
  var truncated = myTag.trim().substring(0, 100) + "…";
  $('#truncate').text(truncated);
}

Sonuç şuna benzer:

Lorem ipsum dolor sit amet, seçkin adipiscing elit. Morbi
elementum sonucu tortor ve euismod…

Umarım bu biraz yardımcı olur.

İşte jsFiddle .

İşte saf css iyi bir örnek .

.container{
  width: 200px;
}
.block-with-text {
  overflow: hidden;
  position: relative; 
  line-height: 1.2em;
  max-height: 3.6em;
  text-align: justify;  
  margin-right: -1em;
  padding-right: 1em;
}
.block-with-text+.block-with-text{
  margin-top:10px;
}
.block-with-text:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
.block-with-text:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

<div class="container">


<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
</div>

<div class="block-with-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>


<div class="block-with-text">
Lorem Ipsum is simply
</div>

</div>

Daha önce istediğinizi yapabilir gibi görünüyor jQuery-condense-eklentisi kullandım . Değilse, ihtiyaçlarınıza uygun farklı eklentiler vardır.

Düzenleme: Sana bir demo yaptı - ben sihirbaz yapan demo jquery.condense.js bağlı, bu eklentinin yazarına tam kredi not edin :)

Geçerli CSS sürümünde bulunmayan standart olmayan bir CSS'dir (Firefox desteklemez). Bunun yerine JavaScript'i kullanmayı deneyin.

Üç köşeli metnin üç nokta ile kesilmesi için saf css yolu

Metin kabının yüksekliğini ayarlayın, -webkit-line-clamp ile kırmak için satırı kontrol edin: 2;

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Daha önce bu konuyla tanıştım ve saf bir css çözümü yok

Bu yüzden (diğerlerinin yanı sıra) bu konuyu ele almak için küçük bir kütüphane geliştirdim. Kütüphane, harf düzeyinde metin oluşturmayı modellemek ve gerçekleştirmek için nesneler sağlar. Örneğin bir metin taşmasını taklit edebilirsiniz: rastgele bir sınır ile üç nokta (bir satır gerekli değildir)

Ekran görüntüsü, eğitim ve yükleme bağlantısı için http://www.samuelrossille.com/home/jstext.html adresinden daha fazla bilgi edinin .

Birisi flexbox'ta çalışmak için hat kelepçesi almaya çalışıyorsa , özellikle biraz uzun kelimelerle işkence testi yaptıktan sonra biraz daha zorlayıcıdır. Bu kod snippet'indeki tek gerçek fark, min-width: 0;kesilmiş metin içeren flex öğesinde ve word-wrap: break-word;. Analiz için https://css-tricks.com/flexbox-truncated-text/ adresine bir şapka ipucu . Yasal Uyarı: Bu hala bildiğim kadarıyla webkit.

.flex-parent {
  display: flex;
}

.short-and-fixed {
  width: 30px;
  height: 30px;
  background: lightgreen;
}

.long-and-truncated {
  margin: 0 20px;
  flex: 1;
  min-width: 0;/* Important for long words! */
}

.long-and-truncated span {
  display: inline;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-wrap: break-word;/* Important for long words! */
}

<div class="flex-parent">
  <div class="flex-child short-and-fixed">
  </div>
  <div class="flex-child long-and-truncated">
    <span>asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasd</span>
  </div>
  <div class="flex-child short-and-fixed">
  </div>
</div>

http://codepen.io/AlgeoMA/pen/JNvJdx (kodlama sürümü)

Buradaki tüm cevaplar yanlış, önemli bir parçayı, yüksekliği kaçırıyorlar

.container{
    width:200px;
    height:600px;
    background:red
}
.title {
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
<div class="container">
    <div class="title">this is a long text you cant cut it in half</div>
</div>

webkit üzerinde çalışan -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>

Bunu yapmanın gerçek kolay bir yolu yok. Clamp.js kütüphanesini kullanın .

$clamp(myHeader, {clamp: 3});

Bir çözüm buldum, ancak metin alanınıza sığacak kaba bir karakter uzunluğunu bilmeniz, ardından önceki boşluğa ... eklemeniz gerekiyor.

Bunu yaptığım yol:

1. kaba bir karakter uzunluğu varsayalım (bu örnekte 200) ve metninizle birlikte bir fonksiyona geçebilirsiniz
2. boşlukları bölün, böylece uzun bir dizeniz olsun
3. jQuery kullanarak karakter uzunluğundan sonraki ilk "" alanı dilimleyin
4. kalanlara katıl ...

kod:

truncate = function(description){
        return description.split('').slice(0, description.lastIndexOf(" ",200)).join('') + "...";           
}

işte bir keman - http://jsfiddle.net/GYsW6/1/