Obcięcie tekstu wewnątrz div

Question

Mam tekst, który jest dynamiczny (pochodzi z mojej bazy danych), który muszę dopasować do mojego div.

Mój div ma stały rozmiar, ale gdy tekst staje się długi, przechodzi do dwóch linii. Jeśli tekst ma być długi, chciałbym umieścić na końcu trzy kropki, aby zmieścić się w jednej linii.

Tak na przykład My really long text staje My really lo...

Próbowałem kilka prób, ale przede wszystkim od nich zależy liczenie znaków w jakiś sposób. To nie jest naprawdę szczęście, ponieważ postać nie ma ustalonej szerokości. Na przykład duże W jest znacznie szersze niż małe i.

Dlatego mam dwa problemy z charakterem podejście liczenia:

1. Jeżeli tekst ma wiele wąskich znaków, zostanie ona dołączona do cięcia i ..., nawet jeśli tekst rzeczywiście zmieści się na jednej linii nawet w swojej oryginalnej formie.

2. Tekst zawiera wiele szerokich znaków, a kończy się na dwóch liniach, nawet po przycięciu do maksymalnej liczby znaków i dołączeniu kropek.

Czy istnieje tutaj jakieś rozwiązanie (JavaScript lub css?), Które uwzględnia rzeczywistą szerokość tekstu, a nie liczbę znaków?

Answer 1

Te style:

white-space: nowrap;  /*keep text on one line */ 
overflow: hidden;   /*prevent text from being shown outside the border */ 
text-overflow: ellipsis; /*cut off text with an ellipsis*/ 

Answer 2

Należy spojrzeć na css elipsy: http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Answer 3

Oprócz ellipsis, chciałbym zaproponować wyświetlacz cały tekst pod kursorem myszy przy użyciu tooltip.

fiddle

Answer 4

Proponuję Trunk8

Można wtedy żadnego tekstu dopasowanie do rozmiaru div, to przycina tekst, który spowodowałby, że wykracza poza 1 linii (dostępny ustawić opcje ilość linii dozwolone)

Np

$('.truncate').trunk8();