複数の列を持つデータのテーブルがあります。そのうちの 1 つは、さまざまな長さのテキストを含むコメント欄です。非常に短いコメントもありますが、非常に長いコメントもあります。ここで、コメントの最初の 50 文字のみを表示し、元のテキストを「タイトル」属性に入れて、ユーザーが値全体を読み取ることができるようにします。
文字列を切り捨てると、テーブルは問題ないように見えますが、切り捨てられたテキストの残りの部分をユーザーが見つけることができなくなります (ブラウザーでは CTRL+F)。
したがって、私の考えは、ソース コードではコメント全体を非表示にしますが、ブラウザの検索メカニズムには表示できるようにすることです。なんとなく可能ですか？あなたたちは何を提案しますか？
ありがとう！
シンプルで面白い解決策:
コメント コンテナーの CSS をoverflow:hidden;またはoverflow:scroll;に設定し、必要に応じてコンテナーの幅と高さを設定します。ユーザーにテキストの一部のみを表示する必要がありますが、ブラウザで完全に読み取ることができます。
さて、考えてみてください...検索機能を使用すると、ブラウザは何をしますか？見つかったテキストまでスクロールして選択します。テキストが表示されていない場合、どうすればそれが可能ですか？私はそれがうまくいく方法を考えることができません。私が考えることができる唯一のオプションは、ブラウザを上書きして、独自の検索機能を実装することです。投稿されたコメントを調べて、ブラウザと同じようにテキストを見つけますが、非表示のテキストを調べて展開できる場合があります。ブラウザの検索をどのように正確にオーバーライドするかについては、おそらくCtrl + Fにバインドでき、そのバインドでは、return falseブラウザが検索を使用しないようにします。それがうまくいくかどうかはわかりませんが、それは単なるアイデアです。あなたが言ったように、基本的な問題はブラウザが隠されたテキストを検索できないことです、そして私はそれをそうする方法を知りません。
良い答えではありませんが、Webkit とおそらく他のエンジンにバグがあります。テキストをwhite-space: nowrap;およびoverflow: hidden;に設定すると、視覚的に切り捨てられますが、非表示のテキストで検索一致が見つかった場合は再び表示されます。
背景画像でスタイル設定されたボタンからテキストを非表示にするために、6 年前から同様の手法を使用しています。
.button {
display: inline-block;
text-indent: 120%;
white-space: nowrap;
}
font-size:0.1px などの汚いトリックがなければ、それが可能だとは想像できません。フルサイズのテキストを表示するか、独自の検索機能を実装するオプションをユーザーに提供できます。ユーザーは、自分に存在しないデータに対してネイティブ検索エンジンを使用して結果を期待する必要があるのはなぜですか。CTRL-F にバインドできますが、誰かがキーバインドを変更したか、メニューを使用している可能性があります。