html リンク タグ タイトル属性 改行 マウス ホバー プロンプト コンテンツ 改行効果

html リンク タグ タイトル属性 改行 マウス ホバー プロンプト コンテンツ 改行効果
オブジェクト上にマウスを移動したときにコンテンツ(タイトル属性の内容)を折り返す方法、HTML タイトルの折り返し方法の概要。

HTML の title 属性はデフォルトで 1 行で表示されます。行を折り返すにはどうすればよいでしょうか。ここで DIVCSS5 では、誰もが共有して使用できるように 2 つの行折り返し方法をまとめ、紹介しています。

1. タイトルコンテンツを直接ラップする

タイトルの内容を直接入力する場合は、「Enter」キーを押して行を折り返します。サンプルコードは次のとおりです。

コードをコピー
コードは次のとおりです。

<a href='https://www.jb51.net' target='_ablank'
title='タイトル: DIVCSS5
著者: DIVCSS5
更新日: 2013-05-17
推奨レベル: なし キーワード: タイトル改行 ページネーション: ページネーションなし 読解レベル: 普通'>html title attribute line break</a>

ブラウザ効果のスクリーンショット:

マウスをリンクテキストに移動してコンテンツを折り返す効果のスクリーンショット

2. HTMLタイトルの改行コードを使用する

改行用のコードには 2 種類あり、どちらも HTML タグ内のタイトル コンテンツが表示されるときに改行を実現できます。

1. 改行コードは次のとおりです。
「&#10;」と「&#13;」

「&#10;」のスペル:

& (アンド記号、キーボードの数字キー 7 と一緒) + # (ポンド記号) + 10 (アラビア数字の 10) + ; (小文字のセミコロン)

「&#13;」のスペル:

& (アンド記号、キーボードの数字キー 7 と一緒) + # (ポンド記号) + 13 (アラビア数字の 13) + ; (小文字のセミコロン)

上記のデジタル入力は半角英語形式で入力する必要があります。使用時には、改行が必要な箇所で改行記号コードを 1 つ (グループ) 選択するだけです。

2. サンプルコードは次のとおりです。


コードをコピー
コードは次のとおりです。

<a href="https://www.jb51.net"
title="1 行目&#10;2 行目&#10;3 行目">タイトル改行 1</a>
<a href="https://www.jb51.net"
title="説明 1&#13;説明 2&#13;説明 3">タイトル改行 2</a>
<!-- HTML コメント: スクリーンショットを完全なものにするために、コードはここで囲まれています -->


3. スクリーンショットの例



サンプルコードのスクリーンショット



マウスがハイパーリンクに移動すると、タイトル属性の内容が表示され、改行表示効果図が実現されます。

<<:  見栄えの良い CSS カスタム スタイル (タイトル h1 h2 h3)

>>:  ウェブページ制作をマスターするために必要な6つのスキルのまとめ

推薦する

10秒以内にMySQLデータベースに数百万件のレコードを挿入する実装

まず、次の質問について考えてみましょう。このような膨大な量のデータをデータベースに挿入するには、通常...

マウスを傾けた状態でのフリップナビゲーションの問題に関する研究

この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...

ブラウザ内でHTMLタグを中央に配置するCSSスタイル

CSS スタイル:コードをコピーコードは次のとおりです。 <スタイル タイプ="te...

MySQLは文字列の連結、インターセプション、置換、位置検索操作を実装しています

MySQL 文字列の連結、インターセプト、置換、および検索位置。よく使用される文字列関数:関数例示す...

mysql 5.7.5 m15 winx64.zip インストール チュートリアル

win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...

JavaScriptを使用してページ効果を作成する

11. JavaScriptを使用してページ効果を作成する11.1 DOMプログラミングDOM プロ...

Linux の総合システム監視ツール dstat の詳細な例

オールラウンドなシステム監視ツール dstat dstat は、vmstat、iostat、nets...

JS での Reduce() メソッドの使用の概要

目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...

関連するプロパティのリストを含む HTML エリア イメージ ホットスポットの使用の概要

<area> タグは主にイメージマップで使用されます。イメージマップにアクティブ領域 (...

MySQL で複数のフィールドを連結する詳細な例

MySQL クエリ結果の行フィールドの結合は、次の 2 つの関数を使用して実装できます。 1. co...

Windows システムで MySQL が起動しない場合の一般的な解決策

MySQL 起動エラーWindows 10 に MySQL をインストールする前は、net star...

Docker 環境での Jmeter の分散操作に関する詳細なチュートリアル

1. jmeterの基本イメージを構築するDockerfile は次のとおりです。 # Java 8...

ウェブデザインとは何か

<br />元の記事: http://www.alistapart.com/articl...

HTML_PowerNode 入門 Java アカデミー

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...

MySQL InnoDB MRR 最適化ガイド

序文MRR は Multi-Range Read の略で、ランダム ディスク アクセスを削減し、ラン...