ホームページ ウェブフロントエンド H5 チュートリアル 共有テキストのオーバーフロー非表示の例

共有テキストのオーバーフロー非表示の例

May 11, 2018 pm 01:34 PM
文字 オーバーフロー 隠れる

以前、ページを書くときに単行テキストのオーバーフロー非表示を使用していましたが、今日、複数行のテキストのオーバーフロー非表示に遭遇し、オーバーフロー部分に省略記号を使用しました。いくつかの情報を確認して整理し、共有しました。

単行テキストのオーバーフロー非表示

単行テキストのオーバーフロー非表示については、 text-overflow: ellipsis で完璧に解決できますが、使用する場合は と組み合わせる必要があります。 overflow:hiddenwhite-space:nowrap;、時々書き忘れてしまい効果が出ず探すのに時間がかかりました。

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title>单行文本溢出隐藏</title> 
 6     <style> 
 7         p{ 
 8             width: 200px; 
 9             height: 300px;
 10             border: 1px solid cyan;
 11             overflow: hidden;/*溢出隐藏*/
 12             white-space: nowrap;/*文字不换行*/
 13             text-overflow: ellipsis;/*溢出用省略号代替*/
 14         }
 15     </style>
 16 </head>
 17 <body>
 18 <p>
 19     <p>凭借专业的精神、优质的团队、周到的服务,东方卓越现已成为众中国银行业协会、中国航空运输协会、
 中国工商银行、中国建设银行、凤凰网、联想(北京)、中国人保等知名企业的合作伙伴,服务领域涵盖金融证券、
 汽车产业、时尚传媒、互联网、地产家居、旅游娱乐等重点领域。</p>
 20 
 21 </p>
 22 </body>
 23 </html>
ログイン後にコピー

効果:

複数行テキストのオーバーフロー非表示

私は疑似クラスタグを使用しています

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title>多行文本溢出隐藏</title> 
 6     <style> 
 7         p{ 
 8             position: relative;
 9             overflow: hidden;
 10             width: 200px;
 11             height: 300px;
 12             line-height: 30px;
 13             font-size: 20px;
 14             border: 1px solid cyan;
 15         }
 16         p:after{
 17             position: absolute;
 18             bottom: 0;
 19             right: 0;
 20             padding:0 5px 1px 45px;
 21             content: &#39;...&#39;;/*结尾内容换为 ... */
 22             background:url("") repeat-y; /*背景是一个半白半透明的图片*/
 23         }
 24     </style>
 25 </head>
 26 <body>
 27 <p>
 28     凭借专业的精神、优质的团队、周到的服务,东方卓越现已成为众中国银行业协会、
 中国航空运输协会、中国工商银行、中国建设银行、凤凰网、联想(北京)、中国人保等知名企业的合作伙伴,
 服务领域涵盖金融证券、汽车产业、时尚传媒、互联网、地产家居、旅游娱乐等重点领域。凭借专业的精神、优质的团队、
 周到的服务,东方卓越现已成为众中国银行业协会、中国航空运输协会、中国工商银行、中国建设银行、凤凰网、
 联想(北京)、中国人保等知名企业的合作伙伴,服务领域涵盖金融证券、汽车产业、时尚传媒、互联网、地产家居、
 旅游娱乐等重点领域。
 29 </p>
 30 </body>
 31 </html>
ログイン後にコピー

効果:

お友達、もっと良い方法があれば、ぜひ共有してください!

以上が共有テキストのオーバーフロー非表示の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

pptで丸い写真とテキストを作成する方法 pptで丸い写真とテキストを作成する方法 Mar 26, 2024 am 10:23 AM

まず、PPT で円を描き、テキスト ボックスを挿入してテキストの内容を入力します。最後に、テキストボックスの塗りつぶしと輪郭を「なし」に設定すれば、円形の絵と文字の制作が完了です。

Win11の入力方式フローティングウィンドウの非表示設定 Win11の入力方式フローティングウィンドウの非表示設定 Dec 30, 2023 pm 11:24 PM

Win11 の入力方式のフローティング ウィンドウ機能に慣れておらず、いつも操作に違和感があるため、このフローティング ウィンドウ機能をオフにしたいという友達がいます。 win11システム. に従ってください。 win11で入力方法のフローティングウィンドウを非表示にする 1. パソコンの設定キーを開き、「時刻と言語」を選択し、入力後「Enter」をクリック 2. 「キーボードの詳細設定」で「入力方法の切り替え」を探し、 「デスクトップ言語」を変更します。 「バー」の前にあるチェックマークをクリックし、「言語バーオプション」と入力します。 3. 開いたら、ここで「非表示」をクリックして、言語フローティングウィンドウを閉じます。

Wordでテキストにドットを追加するにはどうすればよいですか? Wordでテキストにドットを追加するにはどうすればよいですか? Mar 19, 2024 pm 08:04 PM

日常的に Word 文書を作成するとき、特にテスト問題がある場合、文書内の特定の単語の下にドットを追加する必要があることがあります。コンテンツのこの部分を強調するために、エディターが Word でテキストにドットを追加する方法のヒントを共有します。 1. 空白の Word 文書を開きます。 2. たとえば、「テキストにドットを追加する方法」という単語の下にドットを追加します。 3. まず、マウスの左ボタンで「テキストにドットを追加する方法」という単語を選択します。将来その単語にドットを追加したい場合は、まずマウスの左ボタンを使用して単語を選択する必要があることに注意してください。 。今日はこれらの単語に点を追加するので、いくつかの単語を選択しました。これらの単語を選択して右クリックし、ポップアップ機能ボックスで [フォント] をクリックします。 4. するとこのようなものが表示されます

Windows 11のタスクバーアイコンを非表示にする方法は? Windows 11のタスクバーアイコンを非表示にする方法は? Jan 06, 2024 am 08:38 AM

win11システムでは、タスクバーのアイコンが煩わしい場合、タスクバー隅のオーバーフローインターフェースでアイコンを非表示にすることができますが、下で開いたアプリケーションのタスクバーのアイコンは非表示にできませんので、以下のエディターに従いましょう。具体的な状況を見てみましょう。 win11 タスクバー アイコンを非表示にする方法: 1. アイコンを中央に配置します。 1. まず、下のタスクバーでアイコンを非表示にしたい場合は、右クリックしてアイコンを選択し、[タスクバーからのピン留めを解除] をクリックします。 2. ただし、開いた場合このアプリケーションを使用中であるため、非表示にすることは不可能です。 2. 右下隅のアイコン 1. 右下隅のアプリケーション アイコンを非表示にしたい場合は、まずシステム設定を開きます。 2. 次に、図に示すように、左側のサイドバーの「個人用設定」をクリックします。 3. 次に、右側のタスクバーをクリックして表示します。

WeChatの友達をブロックしたり削除したりせずに非表示にする方法は? WeChatの友達をブロックしたり削除せずに非表示にする方法 WeChatの友達をブロックしたり削除したりせずに非表示にする方法は? WeChatの友達をブロックしたり削除せずに非表示にする方法 Mar 13, 2024 pm 07:19 PM

WeChatの友達をブロックしたり削除したりせずに非表示にする方法は?友達を非表示にしたいが、その方法がわからないユーザーが多いため、このサイトでは、WeChat の友達をブロックしたり削除したりせずに非表示にする方法をユーザーに丁寧に紹介します。ブロックや削除せずに WeChat の友達を非表示にする方法 方法 1: 1. まず WeChat ソフトウェアを開き、WeChat ページでアドレス帳を見つけて、「マイ」をクリックします。 2. 次に、設定ページに入ります。 3. 「プライバシー」オプションを見つけてクリックします。 4. 次に、「彼に見せない」をクリックします。 5. [彼女に表示させない] ページに移動し、[+] をクリックして非表示にしたい友達にチェックを入れます。

Douyinショートビデオの作品を非表示にする方法 個人的なビデオ作品を非表示にする方法 Douyinショートビデオの作品を非表示にする方法 個人的なビデオ作品を非表示にする方法 Mar 12, 2024 pm 12:49 PM

Douyinショートビデオアプリソフトには多数のショートビデオ作品が用意されており、好きなだけ視聴することができ、全て永久無料で提供されています。さまざまなタイプのライブビデオチャンネルがオープンしており、ビデオコンテンツはすべてオリジナルです。誰もが最も満足できる視聴方法を提供します。アカウントを入力してオンラインにログインすると、誰もが毎日視聴している動画に基づいて正確に推奨される、さまざまな刺激的なショートビデオがプッシュされます。また、生放送ルームに入ってアンカーと対話したりチャットしたりすることもできます。もっと幸せに。個人がアップロードした作品も非表示にすることができます。設定はワンクリックで非常に簡単です。スワイプするとどこからでも見ることができます。上下にスワイプすると、無数のネチズンのリアルタイムのコメントが表示されます。日常生活のダイナミクスを共有することもできます。編集者は詳細なオンライン Douyin ショート ビデオを公開しており、ユーザーは個人のビデオ作品を非表示にする方法を求めています。最初に公開された Douyin のショートビデオ

Xiaomi Mi 14でスマートアイランドを非表示にする方法は? Xiaomi Mi 14でスマートアイランドを非表示にする方法は? Mar 18, 2024 pm 03:40 PM

Xiaomi Mi 14は、驚くべきハードウェア構成と優れた機能に加えて、スマートアイランドという魅力的な場所も隠しています。ここでは、ユーザーはパーソナライズされたカスタマイズと無制限のクリエイティブな携帯電話体験を楽しむことができます。しかし、誰もがこの機能を好むわけではないので、Xiaomi Mi 14はどうやってスマートアイランドを隠すのでしょうか?一緒に調べてみましょう。 Xiaomi Mi 14でスマートアイランドを非表示にする方法は? 1. Xiaomi 14 携帯電話の設定アプリケーションを開きます。 2. スクロールして「機能」オプションを見つけ、クリックして入力します。 3. 機能ページで「スマートアイランドを非表示」オプションを見つけてオンにします。 4. スマート アイランドの非表示がオンになっていることを確認した後、デスクトップに戻ると、スマート アイランドが非表示になっていることがわかります。

Douyin での作品の非表示に関する詳細なチュートリアル Douyin での作品の非表示に関する詳細なチュートリアル Mar 25, 2024 pm 03:11 PM

1.まず[+]をクリックして撮影します。 2. 右下のチェックマークをクリックして撮影完了を確認します。 [次へ]をクリックし、3. [閲覧できるユーザー]をクリックします。 [プライベート] を選択するだけです シナリオ 2: 作品が取得されました 1. [自分] をクリックし、[仕事] を選択します。 2. 右側の[3 点]のロゴをクリックします。 3. 左にスワイプして [権限設定] を見つけます。 4. [非公開に設定] をクリックします。

See all articles