Zachowaj dwie pierwsze linie tekstu, usuń wszystko inne.

Question

Mam jeden tekst w postaci <div>. Z powodu szerokości tekstu div tekst jest wyświetlany w wielu wierszach. Na przykład. następujący kod:

<div>text01 text02 text03 text04 text05 text06 text07 text08 text09 text10 text11 text12</div> 

może być wyświetlany w cztery linie:

text01 text02 text03 
text04 text05 text06 
text07 text08 text09 
text10 text11 text12 

pragnę zachować tylko pierwsze dwie linie, a jeśli kolejne linie są obecne muszą być usunięte i zastąpione linią tekstu ... jako nowy (a więc trzeciego) linii tekstu.
Innymi słowy: chcę znaleźć drugą linię podziału (jeśli jest obecna) i zastąpić cały tekst po tym punkcie linią tekstową, która mówi: ....

Więc, jeśli mam dwie linie tekstu, nic się nie zmieniło:

text text text 
text text text 

Ale jeśli mam więcej niż dwie linie jak wyżej, będę się w ten sposób:

text01 text02 text03 
text04 text05 text06 
... 

Każdy dobry Rada?

Answer 1

Możesz użyć explode(), aby podzielić ciąg znaków (zawartość div) na tablicę. Użyj <br> lub /n jako żetonu podziału. Następnie możesz zastąpić zawartość div pierwszymi dwoma elementami tablicy.

$content = 'Hello<br>World<br>Other<br>Stuff'; 
$lines = explode('<br>',$content,2); 

echo '<div>'$lines[0].'<br>'.$lines[1].'<br>...</div>' 

Answer 2

Należy to zrobić w css iw razie potrzeby dodać JavaScript.

w CSS można ustawić:

.two-line-div { 
    max-height: 3em; /* or whatever adds up to 2 times your line-height */ 
    overflow: hidden; 
} 

To zmniejszy pole do żądanej wysokości.

Jeśli zawsze chcesz pokazać ... (jeśli zawartość jest zawsze większa niż 2 linie), po prostu dodaj element z trzema kropkami po numerze div.

Jeśli chcesz dodać kolejną linię z ..., jeśli zawartość jest większa niż wyświetlana, potrzebujesz javascript, aby obliczyć oryginalną wysokość, sprawdzić, czy jest więcej niż 2 linie i dodać/pokazać element dynamicznie, jeśli to jest.

Należy zauważyć, że rozwiązanie css niczego nie usuwa, wszystkie linie są tam, są po prostu niewidoczne.

Answer 3

Jest czystym CSS Rozwiązanie działa w większości nowoczesnych przeglądarek (niektóre starsze wersje Firefoksa nie obsługuje):

div { 
    overflow: hidden; /* "overflow" value must be different from "visible" */ 
    text-overflow: ellipsis; /* the magic dots...*/ 
    height: <yourHeightValue> 
    width: <yourWidthValue> 
} 

Uprawiając jak to w PHP może być nieco bardziej skomplikowana, w zależności na czym zawiera DIV (zagnieżdżony HTML ?, czym dokładnie jest "linia" dla ciebie -> łamanie HTML <br>, podział wiersza \ n)? W większości przypadków rozwiązania PHP dzielą się po zdefiniowanym łańcuchu lub długości słowa. Możesz znaleźć kilka przykładów tego rodzaju ograniczeń tekstu, this one to kompleksowe rozwiązanie, które może obsługiwać znaczniki html.