保留兩條第一條文本行，刪除其他所有內容

在<div>我有一些文字。由於div-寬度文本顯示在多行中。例如。以下代碼：保留兩條第一條文本行，刪除其他所有內容

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

可能顯示在例如四行：

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

我想只保留前兩行，並且如果進一步線存在時，它們必須被除去，並用作爲一個新的（因此第三）文本行的文本行...替換。
換句話說：我希望找到第二個換行符（如果存在），並在文本行中用...代替這個點之後的所有文本。

所以，如果我有兩行文字，沒有什麼改變：

text text text 
text text text

但是，如果我有一個像上面兩行以上，我會得到這樣的：

text01 text02 text03 
text04 text05 text06 
...

有什麼好建議？

來源

2012-12-20 Steeven

這樣做PHP側（即服務器端）並不容易，因爲線路大小將取決於客戶端分辨率。 –

所以需要一些JavaScript？ – Steeven

是首選，是的。 – KingCrunch

-1

您可以使用explode()將您的字符串（div的內容）拆分爲數組。使用<br>或/n作爲拆分令牌。然後，您可以用數組的前兩個元素替換div的內容。

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

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

來源

2012-12-20 14:03:03 Tuim

但是，如果我的文本行只是：'$ content ='Hello World Other Stuff';'沒有任何'
'，那麼腳本能夠挑出自動添加的'\ n'嗎？ – Steeven

你可以使用nl2br（$ content）; – Tuim

我無法完成這項工作。用'$ a = explode（'
'，nl2br（$ content））計數; echo count（$ a）'只計算文本中已有的換行符。它看不到由'div'內的文字包裝造成的換行符。 – Steeven

你應該做的是在CSS，如果需要添加JavaScript。

在CSS中，您可以設置：

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

這將箱子降低到想要的高度。

如果你總是想顯示...（如果內容總是多於2行），只需在你的div之後添加一個帶有三個點的元素。

如果你想添加另一條線...如果內容比你顯示的內容大，你需要JavaScript來計算原始高度，看看它是否超過2行，並動態添加/顯示元素if它是。

請注意，一個CSS解決方案不會刪除任何東西，所有的行都在那裏，他們只是不可見。

來源

2012-12-20 14:03:22 jeroen

謝謝。我實際上需要它比這更有活力;如果只有一條線，那麼周圍的「div」框也應該只有一條線高度，而不是永久地說3em高。 – Steeven

當然，這也可以用js來調整... – Steeven

@Steeven這是自動的，我使用'max-height'而不是'height'，所以只有一行，但box只會是一行。 'max-height'告訴盒子增長到某個最大值。 – jeroen

有一個純CSS解決方案中的大部分現代瀏覽器的工作（一些老的Firefox版本不支持它）：

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

做這樣的事情在PHP可能是一個有點複雜，這取決於DIV包含什麼內容（嵌套的HTML？，對你來說究竟是什麼「行」 - > HTML中斷<br>，換行符\ n）？在大多數情況下，PHP解決方案在定義的字符串或字長之後進行拆分。你可以找到很多這種文本限制的例子，this one是一個複雜的解決方案，它也可以處理html標籤。

來源

2012-12-20 14:22:02

'ellipsis'聽起來好多了，它實際上是;它只適用於一行，不適用於多行。 – jeroen

它是純文本的文本行，沒有html。如果「省略號」垂直工作而不是水平工作，這是完美的。我無法做到這一點，雖然... – Steeven

是的，你是對的，忘了這一點。省略號在多行上下文中仍然不可用。 –

保留兩條第一條文本行，刪除其他所有內容

回答

相關問題