幅の変動の中でも存在感を維持するためにテキストに省略記号を実装するにはどうすればよいですか?

DDD
リリース: 2024-10-30 06:28:28
オリジナル
696 人が閲覧しました

How to Implement Ellipsis in Text to Maintain Presence Amidst Width Fluctuation?

テキスト内の省略記号: 幅の変動の中でも存在感を維持する

Web デザインの領域では、省略記号 (".. .") をテキスト内に含め、さまざまな幅にまたがることができます。これにより、テキスト幅が文字列全体に収まるときに省略記号が消えるという望ましい動作を実現する際に課題が生じます。

これに対処するには、JavaScript と HTML を利用したカスタム アプローチを実装できます。テキストを含む HTML 要素内で、完全な文字列を次のようなデータ属性に割り当てることができます。

<span data-original="your string here"></span>
ログイン後にコピー

ページが読み込まれると、JavaScript 関数をトリガーしてデータから元の文字列を取得できます。属性を使用して、span タグの内部 HTML 内に配置します。省略記号関数の例を次に示します。

<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>
ログイン後にコピー

この関数は、文字列を特定の長さに切り詰め (フォント サイズと必要な間隔に基づいて必要に応じて調整します)、中央に省略記号を挿入します。

要素のサイズが変更されると、サイズ変更イベント リスナーは省略記号関数をトリガーして、目的の動作を維持できます。必要に応じて、関数パラメータを動的にして、さまざまなオブジェクトやテキストの長さをサポートできます。

ブラウザ間でアクセシビリティを確保するには、省略記号内に abbr タグを組み込み、完全な文字列を表示するツールチップを提供することをお勧めします。 :

<abbr title="simple tool tip">something</abbr>
ログイン後にコピー

この JavaScript ベースのアプローチを統合することで、要素の幅の変動に応じて省略記号がシームレスに表示されたり消えたりするため、レスポンシブ デザインで視覚的に魅力的で機能的なテキスト表示が保証されます。

以上が幅の変動の中でも存在感を維持するためにテキストに省略記号を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!