<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 がなくても完全な情報コンテンツを見ることができます。 |
問題を見つける今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書き...
このブログを書くつもりはなかったのですが、実際の操作中に、ネットワークの問題に圧倒されたこと (ネッ...
OSS を使用して Vue プロジェクトに画像や添付ファイルをアップロードするここでは、写真のアップ...
最近のプロジェクトに取り組んでいるとき、下の図に示すように、画像を参照すると常に下部に空白スペースが...
MySQL の replace と replace into はどちらも頻繁に使用される関数です。r...
方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...
HTML: タイトル見出しは <h1> - <h6> などのタグによって定...
IIS7 では、「URL REWRITE2」疑似静的モジュールがインストールされているかどうかを確...
この記事ではMySQL 5.7.21のインストールと設定方法を記録しています。具体的な内容は以下のと...
MySQLデータベースの基本構文DDL操作データベース作成構文: create database デ...
目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...
mapGettersヘルパー関数mapGettersヘルパー関数は、ストア内のゲッターをローカルの計...
今日は、Windows 10 で Linux サブシステムを有効にする方法を紹介します。早速、手順を...
目次JSX環境の構築プロジェクトの設定NPMを初期化するwebpackをインストールするBabelを...
目次1. JSの特徴1.1 マルチパラダイム1.2 説明1.3 シングルスレッド1.4 ノンブロッキ...