サイズ変更可能なテキスト要素に省略記号の切り詰めを実装するにはどうすればよいですか?

テキストのサイズ変更における省略記号の切り詰め

コンテンツの途中で省略記号 ("...") を使用してテキストを切り詰めると、読みやすさが向上します。 UI 要素の幅は可変です。この効果を達成するには、テキスト全体が表示されるときに省略記号を消す必要があるという課題が生じます。

サイズ変更可能な要素内に省略記号を実装するには:

1. を使用します。カスタム データ属性:

   • HTML では、フルテキストをカスタム データ属性に割り当てます:

2. イベント リスナーの設定:

   • JavaScript 関数をトリガーして、データ属性に格納されている元のテキストを含むspanタグ。

3. 省略記号関数:

   • を定義します。テキストを切り詰める JavaScript 関数 (例: "start_and_end"):

     <code class="javascript">function start_and_end(str) {
       if (str.length > 35) {
         return str.substr(0, 20) + '...' + str.substr(str.length-10, str.length);
       }
       return str;
     }</code>

   • さまざまなオブジェクトやフォントに応じて値 (例: 35、20、10) を調整します。

4. 動的補間:

   • フォント サイズと要素の幅に基づいて、表示する適切な文字数を決定するために動的補間を使用することを検討してください。 .

5. ツールチップのアクセシビリティ:

   • 省略記号に abbr タグを追加して、フルテキストのツールチップを有効にします。

これらの手順を実装すると、テキスト要素の途中で省略記号を使用してテキストを効果的に切り詰めることができ、要素が完全に引き伸ばされたときにテキストが確実に消えるようにすることができます。テキストの幅。

以上がサイズ変更可能なテキスト要素に省略記号の切り詰めを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。