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 を使用して minio と java sdk を構築するプロセスの詳細な説明

目次1minioはシンプル2 Dockerビルド minio 2.1 単一ノード2.2 マルチノード...

JavaScript を使用したコマンドライン アプリケーションの構築

目次1. ノードをインストールする2. Commander.jsをインストールする3. JavaSc...

MySQLのMERGEストレージエンジンの詳細な説明

MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...

Vue v-model 関連の知識のまとめ

​v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...

JSは単純なフィルタリングから複数条件のフィルタリングまで配列フィルタリングを実装します

目次単一条件単一データフィルタリング単一条件複数データフィルタリング複数の条件付きデータフィルタリン...

レスポンシブ原則のソースコード分析のVue解釈

目次初期化初期化状態()初期化プロパティ()初期化データ()観察する()オブザーバーリアクティブを定...

MySQL の自動インクリメント主キーが連続していないのはなぜですか?

目次1. はじめに2. 自己増分ストレージの説明3つの自己付加価値修正メカニズム4. 自己評価を修正...

JS の toFixed() メソッドの丸め精度の問題の詳細な説明

目次落とし穴充填方法何の穴ですか?要約する落とし穴最近、仕事で商品の割引価格を計算すると、いつも1セ...

よく使われるシングルページアプリケーションウェブサイト共有

CSS3お願いしますこのウェブサイトを自分で見て、パラメータを変更し、CSS3効果をオン/オフにする...

MySQL で不明なフィールド名を回避する方法

序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...

vue3.0+echarts は 3 次元の縦棒グラフを実現します

序文: Vue3.0はechartsの3次元縦棒グラフを実装します結果: 実装手順: 1. echa...

Docker ベースの Redis 1 マスター、2 スレーブ、3 センチネルの実装

現在、Redis とコンテナについて学習中なので、Docker を使用して Redis マスタースレ...

http:// の代わりに // を使用する利点は何ですか (アダプティブ https)

//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...

JavaScriptは行削除機能を備えたテーブルを動的に生成します

この記事の例では、テーブルを動的に生成したり行を削除したりするためのJavaScriptの具体的なコ...

MySQL 接続で認証失敗エラーが発生する場合の分析と解決方法

[問題の説明]アプリケーション側では、次のエラーが時々表示されます。メソッド 'mysql_...