ホームページ > ウェブフロントエンド > CSSチュートリアル > サイズ変更可能な要素のテキストに省略記号を実装するにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-10-29 20:33:02
オリジナル
249 人が閲覧しました

How to Implement Ellipsis in Text for a Resizable Element?

テキスト内の省略記号: 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート