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

テキスト内の省略記号: Mac スタイルの実現

課題:

省略記号の実装 ( " ...") サイズ変更可能な要素内のテキストの中央にあります。要素の幅がテキスト全体の幅と一致すると、省略記号は消えます。

解決策:

1. HTML にデータ属性を追加:

   HTML では、次のようなカスタム data-* 属性にフルテキスト値を含めます。

   <span data-original="your string here"></span>

   ログイン後にコピー

2. JavaScript イベント リスナー:

   要素の読み込みイベントとサイズ変更イベントにイベント リスナーを追加します。これらのリスナーは、次のような JavaScript 関数をトリガーする必要があります。

   • data-* 属性から元のテキストを取得します
   • span 要素の innerHTML にテキストを配置します

3. 省略記号関数:

   テキストが一定の長さを超えた場合にテキストをトリミングする省略記号関数を作成します。例:

   <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>

   ログイン後にコピー

   必要に応じてテキストの長さと位置の値をカスタマイズします。

4. 全文のツールチップ:

   アクセシビリティを高めるには、全文を表示するツールヒントを含む省略記号に abbr タグを追加することを検討してください:

   <code class="html"><abbr title="full string">...</abbr></code>

   ログイン後にコピー

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