dotdotdot Auslassungs auch hinzufügen, wenn nicht abgeschnitten

I dotdotdot verwenden, um Text in Höhe angegeben Felddotdotdot Auslassungs auch hinzufügen, wenn nicht abgeschnitten

<div class="product-description dotdotdot" style="word-wrap: break-word;"> 
    <div class="product-description-icon"> 
     <span> 
      <img src="product_gloves.png" alt="Gloves"> 
     </span> 
    </div> 
    <h4>Gloves</h4> 
    <p>Some gloves text...</p> 
</div>

jQuery trunkieren:

Mein product-description dotdotdot haben eine min-height von 100px und der Text haben die Ellipse am Ende, aber der Text ist nicht abgeschnitten und es gibt immer noch viel freien Platz.

Vielen Dank für Ihre Hilfe

Quelle

2016-01-14 Leeroy521

Gibt es einen Grund, warum Sie ein jquery-Plugin für Ellipsen verwenden und nicht nur CSS verwenden? https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ – ntgCleaner

ich dotdotdot heruntergeladen haben, und die README.md gefolgt und es funktioniert gut (außer $(window).resize).

Sie müssen möglicherweise mehr Zusammenhang mit Ihrer Frage geben:

Sind auch Sie alle notwendigen .js Dateien im <head> Ihre Markup und in der richtigen Reihenfolge?
Ist Ihr jQuery in einem});

ich am dotdotdot Skript noch in der Tiefe nicht sah $(document).ready(function() {Ihr Skript gewickelt. Mine feuert genau dieses Skript:

$(document).ready(function() { $(".wrapper").dotdotdot({ // configuration goes here }); });

Auf einen Blick Ich frage mich, ob Ihre Wahl der Klassenname .dotdotdot Probleme verursacht werden könnten. Benennen Sie Ihre Klasse (n) möglicherweise in um und führen Sie das Skript für diese Klasse aus.

Hoffnung, dies hilft Sie

Quelle

2016-01-25 22:28:40 danMad

mir einen reinen CSS3 Ansatz anstelle von jQuery verwenden würde.

Hier sind zwei meiner Lieblings SASS Mixins, um sowohl Word-Wrapping oder eine Ellipse zu erreichen;

@mixin word-wrap() { 
    word-break:  break-word; 
    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens:   auto; 
} 

@mixin ellipsis() { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
}

Quelle

2016-01-27 12:45:49

dotdotdot Auslassungs auch hinzufügen, wenn nicht abgeschnitten

Antwort

Verwandte Themen