6

私はいくつかの<div>テキストを持っています。-width のためdiv、テキストは複数行で表示されます。たとえば、次のコード:

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

たとえば、次の 4 行で表示される場合があります。

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

最初の 2 行のみを保持したいのですが、それ以上の行が存在する場合は、それらを削除し...て、新しい (したがって 3 番目の) テキスト行としてテキスト行に置き換える必要があります。
言い換えれば、2 番目の改行 (存在する場合) を見つけて、この時点以降のすべてのテキストを というテキスト行に置き換えたいと考えています...。

したがって、2 行のテキストがある場合、何も変更されません。

text text text
text text text

しかし、上記のような行が 2 つ以上ある場合は、次のようになります。

text01 text02 text03
text04 text05 text06
...

良いアドバイスはありますか？

4

3 に答える 3

5

cssでそれを行い、必要に応じて javascript を追加する必要があります。

css で次のように設定できます。

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

これにより、ボックスが目的の高さに縮小されます。

常に表示したい場合...(コンテンツが常に 2 行以上の場合)、. の後に 3 つのドットを持つ要素を追加するだけdivです。

コンテンツが表示されているものよりも大きい場合に別の行を追加する...場合は、元の高さを計算する JavaScript が必要です。それが 2 行を超えているかどうかを確認し、要素を動的に追加/表示します。

CSS ソリューションは何も削除しないことに注意してください。すべての行がそこにあり、表示されないだけです。

于 2012-12-20T14:03:22.633 に答える
0

最新のブラウザーのほとんどで動作する純粋な 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 ソリューションは、定義された文字列または単語の長さの後で分割されます。この種のテキスト制限の例は数多くありますが、これは html タグも処理できる複雑なソリューションです。

于 2012-12-20T14:22:02.530 に答える
-1

を使用explode()して、文字列 (の内容div) を配列に分割できます。<br>or/nを分割トークンとして使用します。div次に、の内容を配列の最初の 2 つの要素に置き換えることができます。

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

echo '<div>'$lines[0].'<br>'.$lines[1].'<br>...</div>'
于 2012-12-20T14:03:03.343 に答える