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

切り詰められたテキスト内の省略記号の挿入

サイズ変更可能な要素内のテキストの中央に省略記号を実装するには、次のアプローチを検討してください。

ステップ 1: データ属性の宣言

HTML では、次のようなカスタム data-* 属性内に全文を含めます:

ステップ 2: イベント リスナー

割り当てJavaScript 関数へのロードとサイズ変更のためのイベント リスナー。

ステップ 3: 省略記号関数

次の JavaScript 関数を使用して省略記号の挿入を処理します。

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

さまざまな切り捨ての値 (例: 20 と 10) を調整します。

ステップ 4: InnerHTML の挿入

イベント リスナー関数内で、元のデータを読み取ります。属性を指定して、span タグの innerHTML に配置します:

<code class="javascript">mySpan.innerHTML = start_and_end(mySpan.getAttribute("data-original"));</code>

ステップ 5: ツールヒント (オプション)

完全な文字列をユーザーにツールヒントとして提供するには、title 属性を持つ abbr タグを追加します:

...

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