Webデザイン: タイトルが完全に表示できない場合

Webデザイン: タイトルが完全に表示できない場合
<br />今日、新しくなった ChinaUI.com の Web サイトを見たのですが、ますます美しくなっていると思います。この変化は確かにかなり大きいです。朝にちょっと見て閉じました。夕方にもう一度開けてみると、問題が見つかりました。つまり、デザインの幅の関係でタイトルが完全に表示されず、プログラムで文字を切り取っているようです。多くのサイトがこのような状況に遭遇したことがあると思います。視覚効果のために、ウェブサイト全体の視覚効果に合わせてテキストを切り詰める必要があります。通常、切り捨てには 2 つの方法を使用します。1 つは、バックグラウンドで出力するときに、事前に特定の文字数を設定する方法です。もう 1 つの方法は、CSS または JS を使用して、出力された完全なコンテンツを視覚的にクリップすることです。
Web ページの標準が登場する前は、基本的に最初の方法がこの問題を解決するために使用されており、現在でも広く使用されています。この方法の利点は、正確に単語数をカットできることですが、バックグラウンドでカット作業が完了しているため、出力される内容が不完全になるという欠点があります。 2 つ目は、CSS または JS を使用して作成された巧妙な手法です。一定の長さを超えるコンテンツを非表示にします。望ましい視覚効果を実現するために、完全なデータ コンテンツを保持できるという利点があります。欠点は、IE 以外のブラウザーでキャプチャされたテキストが完全ではない可能性があることです。たとえば、Firefox では単語の半分が切り取られるという厄介な現象がよく発生します。
私が聞きたい質問は、「タイトルの不完全さは、ユーザーのクリック意欲に影響しますか?」ということです。あえて言うなら、タイトルの不完全さは、ユーザーが情報をクリックする意欲に大きく影響します。ここでは、Youai.com のニュースの見出しを使用して分析します。ウェブサイトには「アメリカが衝撃を与える新しいユーザーインターフェース技術を発明」というニュースの見出しがありますが、これは機械的に切り取られた見出しです。このようなタイトルを見ると、好奇心が掻き立てられるでしょうか? もちろん、それは可能です。しかし、私たちの理解はこうかもしれません。「米国がユーザーインターフェースの新しい技術を発明し、それを自慢している...これはフェイクニュースです。おそらく2つの企業が自慢しているのでしょう。」もしそうなら、私はこの種のゴシップニュースには興味がありません。しかし、完全なタイトルは「米国は、息を吹きかけることでコンピューターを操作できる新しいユーザーインターフェース技術を発明した」であるべきです。私はそのようなタイトルのほうが興味深いです。なぜ息を吹きかけることでコンピューターを操作できるのかを知りたいのです。これは私が今まで考えたことのないことです。こうすれば、このニュースをクリックして見ることに非常に興味を持つようになります。比較してみると、実は「吹き飛ばし操作」が私たちの好奇心を最も掻き立てるものであることがわかります。これが新しい技術の核心です。これもこのニュースの核心的な内容です。
もちろん、切り捨てが必要な場合もあります。そうしないと、Web サイト全体が乱雑に見えてしまいます。現在一般的な解決策は、リンクに「title」属性を追加することです。意味が不明瞭なタイトルに遭遇した場合、私は通常、マウスを移動してプロンプト領域のテキストを表示し、より完全なタイトル情報を取得します。これは、ニュースをクリックするかどうかを決定するのに役立ちます。しかし残念なことに、Youai.com のタイトル リンクの title 属性はタイトル コンテンツと同じであるため、title 属性の重要性が大幅に低下します。
デザインする際には、もちろんタイトルをできるだけ完全に表示するように努めます。特別な理由によりタイトルを完全に表示できない場合は、title 属性をできるだけ完全にする必要があります。また、Firefox では CSS の切り捨てに欠陥がありますが、それでも切り捨ては CSS で行うべきだと私は考えています。少なくともこの方法では、完全な HTML 情報ドキュメントを取得できます。少なくとも、CSS がなくても完全な情報コンテンツを見ることができます。

<<:  MySQL 8.0 のメモリ消費の詳細な分析

>>:  私が遭遇したIE8の互換性に関する注意事項

推薦する

docker compose を使用して FastDfs ファイル サーバーをインストールする詳細な例

ドッカーの作成 バージョン: '2' サービス: fastdfsトラッカー: ホスト...

CSS の 6 つの重要なセレクター (3 秒で覚える)

出典: https://blog.csdn.net/qq_44761243/article/deta...

div の水平レイアウトを両側に揃える 3 つの方法

この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共...

JavaScript の new 演算子の原理と例の詳細な説明

新しい用途new の機能は、コンストラクターを通じてインスタンス オブジェクトを作成することです。イ...

Tomcat で server.xml と content.xml を変更した後の自動復元の問題の解決方法

設定ファイルを server.xml と content.xml に書き込みます。サーバーを再起動す...

Vue ログインページ用の動的パーティクル背景プラグインの実装

目次動的パーティクル効果は次のとおりです。プラグインをインストールする動的パーティクル効果は次のとお...

Linuxのファイル操作の知識ポイントを詳しく解説

ファイル操作に関連するシステムコール作成するint creat(const char *ファイル名,...

MySQL はカスタムシーケンスを使用して row_number 関数を実装します (詳細な手順)

いくつかの記事を読んだ後、ようやく MySQL で row_number() ソートを実装する方法が...

無効にしてHTMLフォーム入力を送信した後にフォーム値が取得されない問題を解決する方法

フォーム入力ボックスの入力をdisable属性に設定して送信すると、入力ボックスの値を取得できなくな...

階段効果を実現するためのWeChatアプレットカスタムメニューナビゲーション

設計意図ページを開発する際には、ページ上のナビゲーション メニューをクリックしたときにページを対応す...

MySQLとRedisキャッシュ間の同期ソリューションについての簡単な説明

目次1. ソリューション 1 (UDF)デモケース2. ソリューション2(binlogの解析)キャナ...

ローカル写真をアップロードする前にプレビューコード例を実装するための HTML5 と jQuery

HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...

IE6/7 における a.getAttribute(href,2) 問題の分析と解決

簡単な説明<br />IE6および7では、一般的なaタグ(HTMLで記述され、DOM操作...

Vue+echart で 2 列チャートを実現

この記事では、vue+echart を使って二重列チャートを実現するための具体的なコードを参考までに...

Centos7 で yum を使用して Mysql5.7.19 をインストールする詳細な手順

Centos7 の yum ソースには、mysql の代わりに mariaDB が使用されているため...