Webアプリによる印刷文字列の幅の決定

StackOverflow https://stackoverflow.com/questions/33893

  •  09-06-2019
  •  | 
  •  

質問

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

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

役に立ちましたか？

解決

これを別の解釈で説明します。省略記号なしで生きていく必要はありません。

<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 の提案により、これを少し修正しました。実際の変更点は 2 つだけです。 doctype (以下の注を参照) と、 display: inline-block の属性 .qrytxt DIV.今の様子はこんな感じです...

<!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で表示

  • あ doctype IE が取得するには必要です display: inline-block 正しく動作するように。

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

繰り返しますが、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 ファイルを作成する必要があることに注意してください。 省略記号-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>

他のヒント

ちょっとした JavaScript を非常に簡単に使用することもできます。

document.getElementByID("qrytxt").offsetWidth;

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

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>

PHP は、フォントを測定するために設計された関数があるにもかかわらず、完全に考慮から外すべきです。 http://www.php.net/imageftbbox の場合、訪問者が予想されるフォント サイズより大きい最小フォント サイズ設定をしているかどうかを PHP が知る方法はありません。

@ロバート

楕円を低い div に配置するとどうなるでしょうか z-index 左に移動すると（短い行の場合）背景画像か何かで隠れてしまうのでしょうか？

かなりハッキングだとは思いますが、試してみる価値はありますよね?

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top