10

私の (PHP) Web アプリには、最近の検索履歴を保持するサイトの一部があります。最新のクエリがサイド ボックスに表示されます。クエリ テキストが長すぎる場合は、切り捨てて省略記号を表示します。例: 「私の非常に長いクエリは...」

現在、特定の文字数の後に切り捨てています。フォントはモノタイプではないため、すべて I のクエリはすべて W のクエリよりも狭くなります。楕円の前に、それらをすべてほぼ同じ幅にしたいと思います。結果の文字列のおおよその幅を取得して、特定の文字列の楕円が最初からほぼ同じピクセル数で発生するようにする方法はありますか? CSSには方法がありますか？PHPですか？これは JavaScript で処理したほうがよいでしょうか?

4

5 に答える 5

9

これは別の見方であり、省略記号なしで生活する必要はありません!

<html>
<head>

<style>
div.sidebox {
    width: 25%;
}

div.sidebox div.qrytxt {
    height: 1em;
    line-height: 1em;
    overflow: hidden;
}

div.sidebox div.qrytxt span.ellipsis {
    float: right;
}
</style>


</head>

<body>

<div class="sidebox">
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Short text. Fail!
    </div>
</body>

</html>

これには 1 つの問題があります。テキストが完全に表示されるほど短い場合、省略記号も表示されます。

[編集: 2009 年 6 月 26 日]

Power-Coder の提案で、これを少し修正しました。実際には、 の追加doctype(以下の注を参照) とDIVのdisplay: inline-block属性の追加の 2 つの変更のみがあります。.qrytxtこれが今の様子です...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style>
        div.sidebox 
        {
            width: 25%;
        }

        div.sidebox div.qrytxt
        {
            height: 1em;
            line-height: 1em;
            overflow: hidden;
            display: inline-block;
        }

        div.sidebox div.qrytxt span.ellipsis
        {
            float: right;
        }
</style>
</head>

<body>
    <div class="sidebox">
        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Short text. FTW
        </div>
    </div>
</body>
</html>

ノート：

  • IE 8.0、Opera 9、FF 3 で表示

  • doctypeIE が をdisplay: inline-block正しく動作させるには、 Aが必要です。

  • 長い単語で DIV のオーバーフローが発生した場合.qrytxt、省略記号と最後に表示される単語との間に大きなギャップが生じます。これは、例を表示し、ブラウザの幅を少しずつ変更することで確認できます。（これはおそらく元の例にも存在していました。そのときは気付かなかっただけかもしれません）

繰り返しますが、不完全な CSS のみのソリューションです。完璧な効果を得られるのは Javascript だけかもしれません。

[編集: 2009 年 6 月 27 日]

ブラウザ固有の拡張機能を使用する別の方法を次に示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <style>
        div.sidebox 
        {
            width: 26%;
        }

        div.sidebox div.qrytxt
        {
            height: 1em;
            line-height: 1em;
            overflow: hidden;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            -ms-text-overflow:ellipsis;
            -moz-binding:url(ellipsis-xbl.xml#ellipsis);
            white-space:nowrap;
        }
    </style>
</head>

<body>
    <div class="sidebox">
        <div class="qrytxt">
            Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            Short text. FTW
        </div>
    </div>
</body>
</html>

上記の例が機能するためには、-moz-binding ルールで参照される xml ファイルellipsis-xbl.xmlを作成する必要があることに注意してください。次の xml が含まれている必要があります。

<?xml version="1.0" encoding="UTF-8"?>
  <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="ellipsis">
      <content>
        <xul:window>
          <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
        </xul:window>
      </content>
    </binding>
  </bindings>
于 2008-08-29T03:43:14.737 に答える
4

また、JavaScriptを少し簡単に使用することもできます。

document.getElementByID("qrytxt").offsetWidth;

要素の幅をピクセル単位で表示し、IE6でも機能します。省略記号を含むスパンを各クエリの最後に追加すると、必要に応じて、CSSを少し操作したJavaScriptの簡単な論理テストを使用して、省略記号を表示/非表示にすることができます。

于 2008-09-04T10:47:09.320 に答える
2

@ロバート

楕円を低い div に配置しz-indexて、左に移動すると (短い行の場合)、背景画像などで覆われるようにするとどうなりますか?

私が知っているのはかなりハックですが、試してみる価値はありますか？

編集別のアイデア: javascript を使用して楕円を含む div の位置を決定し、完全に押し込まれていない場合は非表示にしますか?

于 2008-08-29T04:06:21.327 に答える
2

CSSには方法がありますか？

いいえ

PHPですか？

いいえ

-

そのためには、各文字のフォント メトリックを取得し、それらを文字列内のすべての文字に適用する必要があります。サーバー上で ImageMagick のような描画/レンダリング ライブラリを使用してこれを行うこともできますが、実際には機能しません。これは、異なる OS の異なるブラウザーが異なるフォントを異なる方法でレンダリングするためです。

たとえそれが機能したとしても、レンダリングに永遠にかかるため、やりたくないでしょう。サーバーは、数千ページではなく、1 秒あたり 1 ページ (その場合) をプッシュできます。

末尾の ... なしで生活できる場合は、次のように、divタグと cssを使用してうまく偽造できます。overflow: hidden

.line_of_text {
    height:1.3em;
    line-height:1.3em;
    overflow:hidden;
}

<div class="line_of_text"> Some long text which will arbitrarily be cut off at whatever word fits best</div>
于 2008-08-29T03:05:07.667 に答える
2

フォントを測定するために設計された関数http://www.php.net/imageftbboxがありますが、訪問者が最小値を持っているかどうかを PHP が知る方法がないため、PHP は完全に考慮から除外する必要があります。予想されるフォント サイズよりも大きいフォント サイズの設定。

于 2009-06-26T06:33:12.797 に答える