Korzystanie z przeładowania tekstowego CSS w celu zmiany liczby wierszy tekstu w elemencie o ustawionej wysokości

Jestem głęboko w rozwoju aplikacji do tworzenia iPhone'ów (Safari/WebKit) i chcę mieć elementy o określonej wysokości z tekstem tytułowym i tekstem głównym, tak że zawsze wyświetlają się 3 wiersze. Jeśli tekst tytułu jest krótki, powinny pojawić się 2 linie tekstu podstawowego. Jeśli tekst tytułu jest bardzo długi, powinien zajmować maksymalnie 2 wiersze i zostawić 1 wiersz na tekst podstawowy. Za każdym razem, gdy tekst jest obcięty, powinien wyświetlać wielokropek jako ostatni znak.Korzystanie z przeładowania tekstowego CSS w celu zmiany liczby wierszy tekstu w elemencie o ustawionej wysokości

Wymyśliłem następujące rzeczy, które robią wszystko, czego potrzebuję, poza tym, że nie wyświetlają elipsy. Czy istnieje sposób, aby to rozwiązanie spełniło to ostatnie wymaganie?

Code below, as rendered by Safari http://segdeha.com/assets/imgs/stack-ellipsis.png

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style type="text/css"> 

     #container { 
      width: 100px; 
     } 

     p { 
/*   white-space: nowrap; */ 
      font-family: Helvetica; 
      font-size: 12px; 
      line-height: 16px; 
      text-overflow: ellipsis; 
      max-height: 48px; 
      overflow: hidden; 

      border: solid 1px red; 
     } 

     strong { 
/*   white-space: nowrap; */ 
      font-size: 16px; 
      display: block; 
      text-overflow: ellipsis; 
      max-height: 32px; 
      overflow: hidden; 
     } 

     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <p> 
       <strong>Short title</strong> 
       This is the text description of the item. 
       It can flow onto more than 2 lines, too, 
       if there is room for it, but otherwise 
       should only show 1 line. 
      </p> 
      <p> 
       <strong>Long title that will span more 
       than 2 lines when we're done.</strong> 
       This is the text description of the item. 
       It can flow onto more than 2 lines, too, 
       if there is room for it, but otherwise 
       should only show 1 line. 
      </p> 
     </div> 
    </body> 
</html>

Źródło

2009-07-01 Andrew Hedges

Spojrzałem na http://iphone.facebook.com w Safari (podszywanie się do klienta użytkownika iPhone'a) i wygląda na to, że robią to po stronie serwera. Podejrzewam, że jestem skazany na ten sam los. –

Chciałam zrobić coś podobnego w przeszłości. W końcu próbowałem podzielić linie i dodać serwer po stronie Ellipsis. To zakończyło się tym, że musiałem wiedzieć, jak szeroki i wysoki będzie tekst (w pikselach). W końcu przestałem się denerwować. –

Czy JavaScript nie wchodzi w grę? – peteorpeter

Jednym z rozwiązań tego problemu jest zanikać tekst na zewnątrz zamiast dodać wielokropek. Jeśli jest to dla ciebie odpowiednia alternatywa, przeczytaj dalej.

Ponieważ wysokość linii jest ustalona na 16 pikseli, można użyć prostego obrazu png z gradientem (lub użyć gradientu css3), który przechodzi od przezroczystości do odpowiedniego koloru tła i umieszcza go w prawym dolnym rogu akapitu.

To samo będzie działać dla nagłówka, jeśli umieścisz obraz gradientowy 16 pikseli od góry, tak aby był widoczny tylko wtedy, gdy nagłówek osiągnie dwie linie (dzięki ukrytemu przelewowi).

Źródło

2012-06-07 00:08:14

Można określić rozmiar czcionki do wykorzystania w tej dziedzinie (font-size), a następnie naprawić height i width pola (ponieważ teraz wiesz, jak wiele wierszy font-size wielkości zmieści), a następnie użyć właściwości overflow (nie text-overflow)

Źródło

2012-06-07 00:29:55 Eugene

Wypróbuj ten: jsfiddle.net/7BXtr/. Używa tylko CSS (bez JavaScript).

Zasadniczo tekst ma zastosowanie overflow: hidden, a pozycja ... znajduje się za nim.

Wady:

Wielokropek będzie zawsze pojawiają się po opisie, nawet jeśli jest krótki.
Elipsy zawsze pojawiają się w tych samych miejscach po prawej stronie.

Źródło

2012-06-20 02:31:12

Problem polega na tym, że elipsy będą zawsze wstawiane, nawet jeśli tekst jest zbyt krótki. – leopic

@LEOPiC Wiem, że to tylko Hacky sposób, aby go prawie tam. –

Wiem, że jest za późno na odpowiedź. Ale dla innych szukających tego samego problemu: Rozwijam się na cześć odpowiedzi Magnusa Magnussona.

Aby utworzyć półprzezroczysty odcień, można użyć właściwości box-shadow, która może zostać użyta do stworzenia efektu wewnętrznego cienia.

Źródło

2014-09-24 01:50:39 UKM

Korzystanie z przeładowania tekstowego CSS w celu zmiany liczby wierszy tekstu w elemencie o ustawionej wysokości

Odpowiedz

Powiązane problemy