2016-01-14 8 views
6

używam dotdotdot obciąć tekst w wysokości określonej skrzyncedotdotdot dodać wielokropek nawet gdy nie są obcinane

<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:

My product-description dotdotdot mieć min wysokość 100px, a tekst ma elipsa na końcu, ale tekst nie jest przycięty i wciąż jest dużo wolnej przestrzeni.

Dziękuję za pomoc

+2

Czy istnieje powód, dla którego używasz wtyczki jquery do elips, a nie tylko przy użyciu CSS? https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ – ntgCleaner

Odpowiedz

0

Pobrałem dotdotdot i poszedł za README.md i to działa bez zarzutu (z wyjątkiem $(window).resize).

Być może trzeba dostarczyć więcej kontekst z pytaniem:

  • Czy zawierającej wszystkie niezbędne .js plików w <head> swojej znaczników i we właściwej kolejności?
  • Czy Twój jQuery zawinięte w $(document).ready(function() {skrypcie});

Nie wyglądał w głębi na skrypcie dotdotdot jeszcze. Kopalnia jest wypalania używając dokładnie tego skryptu:

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

W skrócie Zastanawiam się, czy Twój wybór nazwy klasy .dotdotdot może być przyczyną problemów. Być może zmień nazwę klasy, aby przeczytać .product-description-wrapper i uruchomić skrypt na tej klasie.

Nadzieja to pomaga

0

chciałbym użyć czysty CSS3 podejście zamiast jQuery.

Oto dwa z moich ulubionych miksów SASS, aby osiągnąć zarówno zawijanie słów, jak i elipsę;

@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; 
} 
Powiązane problemy