Jak wyświetlić część ciągu za pomocą css

Question

Chcę móc wyświetlać ciąg znaków o długości do 10 znaków. Jeśli ciąg znaków przekracza 10 znaków, chciałbym dodać "..." do końca.

Na przykład, jeśli mam ciąg:

'helloworldmynameisryan' 

chcę być wyświetlane tak:

'helloworld...' 

Ja tylko wyświetlanie mojego ciąg w div tak:

<div>DisplayMessage</div> 

Czy istnieje klasa, którą mógłbym utworzyć, która miałaby zastosowanie tylko wtedy, gdy ciąg znaków miałby więcej niż 10 znaków?

Answer 1

Niestety nie ma dobrej, krzyżowej przeglądarki, aby to zrobić, używając tylko CSS. "text-overflow" zależy od szerokości napisu, a nie od długości łańcucha, zgodnie z potrzebą.

Można użyć właściwości .length ciągów w javascript, aby osiągnąć ten

function ellipsify (str) { 
    if (str.length > 10) { 
     return (str.substring(0, 10) + "..."); 
    } 
    else { 
     return str; 
    } 
} 

nadzieję, że to pomaga.

Answer 2

To się nazywa elipsa i można go użyć na elemencie bloku.

Jednak nie działa w Firefoksie i nie można ustawić szerokości do dokładnie 10 znaków, ponieważ nie można określić szerokości znaków w css.

Jeśli chcesz dokładnie 10 znaków i zgodność z Firefoksem, będziesz musiał użyć javascript lub rozwiązania po stronie serwera.

check wielokropek: http://www.quirksmode.org/css/textoverflow.html

lub spróbuj tego:

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

.ellipsis:after{ 
    content:'...'; 
} 

jQuery plugin do tego:

http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

Answer 3

bez użycia serverside skrypt lub javascript nie można tego zrobić.

Użyj poniższej funkcji.

function LimitCharacter($data,$limit = 20) 
{ 
    if (strlen($data) > $limit) 
    { 
     $data = substr($data, 0, strrpos(substr($data, 0, $limit), ' ')) . '...'; 
     return $data; 
    } 
    else 
    { 
     return $data; 
    } 
} 

wywołanie go jako LimitCharacter($yourString,5);

JavaScript

var str = 'Some very long string'; 
if(str.length > 10) str = str.substring(0,10)+"..."; 

CSS

.limtiCharClass { 
    -o-text-overflow: ellipsis; /* Opera */ 
    text-overflow: ellipsis; /* IE, Safari (WebKit) */ 
    overflow:hidden;    /* don't show excess chars */ 
    white-space:nowrap;   /* force single line */ 
    width: 300px;     /* fixed width */ 
} 

Answer 4

Elipsy jest funkcją CSS3 i podczas testowania w diffe wypożyczyć przeglądarki, w których występują problemy. Szybkie poruszanie się będzie polegało na zdefiniowaniu konkretnego elementu div lub span z ukrytym przepełnieniem, a następnie dodaniu obrazów tła o treści "..."

Answer 5

Według quirksmode, jeśli jest długi tekst jak

<div>11111111111111111111111111111111111111111111111111111111</div> 

Aby to owinąć masz wiele sposobów, użyj <wbr> tag jak poniżej

<div>111111111111111111111111111<wbr>11111111111111111111111111111</div> 

Zostanie wyświetlona jak
lub użyj ­ zamiast, wyjście będzie

111111111111111111111- 
1111111111111111111111 

Jeśli szukasz rozwiązania JS, użyj this.

Answer 6

Firefox faktycznie obsługuje to teraz, wystarczy upewnić się, że cokolwiek próbujesz "skrócić" ma format blokowy i szerokość - która może być rodzicem.

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display:block; 
    width : 100px; /* this could be defined on any parent */ 
}