CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）-CSSチュートリアル-php.cn

質問:

#それでは具体的な操作を行ってみましょう

概要:

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）

易达

Jun 05, 2020 pm 04:01 PM

css3 text-overflow

この記事の目標:

1. 省略記号を使用したテキストの表示効果をマスターする

質問:

1. 次の効果を実現するには、純粋にDIV CSS が必要です。どのフレームにも適用できません

CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）

追加手順

1. 全体の幅は 500 ピクセルで、ページの中央に表示されます

2. タイトルのフォントサイズ 22px、その他のフォントは 16px

3. 左端がスーパーピスタチオの作者名、一番端が2日前の表示時刻

4. すべての小さなアイコンのサイズは 20 ピクセルです。表示

5. タイトルの全文は次のとおりです: ルー・ヤオの「オーディナリー・ワールド」は、数え切れないほどの若者にインスピレーションを与え、数え切れないほどの人々の心を動かしました

#それでは具体的な操作を行ってみましょう

1. 素材の準備: ルートディレクトリに画像フォルダーを作成し、関連するすべての素材画像をここに保存します。素材は ## です。

CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）

##2.index.html を作成し、アーキテクチャを記述します。アーキテクチャを分析するための

アイデア分析:

1. ターゲットは 2 つの部分に分かれています。最初の部分は大きなタイトルですが、このタイトルには省略記号は、その中のテキストがコンテナの最大幅を超えていることを示します。

2、次の部分はリストです。リストは左から右に表示され、作成者の名前、非常に人気のあるロゴ、「いいね！」の数、コメントの数、テキストの公開日 (日単位で表示)

分析によると、次のコードが得られます

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3文本带省略号实现案例</title>
</head>
<body>
    <div class="container">
       <div class="top">
            路遥《平凡的世界》，激励了无数的青年，鼓舞了无数人的心
       </div>
       <div class="bottom">
           <ul>
               <li><span class="text">超级开心果</span></li>
               <li class="zan">
                   <img  class="icon fireicon lazy"  src="/static/imghw/default1.png"  data-src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）"   / alt="CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" >
                   <img  class="icon zanicon lazy"  src="/static/imghw/default1.png"  data-src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）"   / alt="CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" >
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img  class="icon lazy"  src="/static/imghw/default1.png"  data-src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）"   / alt="CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" >
                <span class="text">0</span>
               </li>
               <li class="date"> <span class="text">2天前</span></li>
               <li class="clear"></li>
           </ul>
       </div>
    </div>
</body>
</html>

ログイン後にコピー

3. 書き方

アイデア分析:

1. .container *

アイデア分析

1.コンテナ内のすべての要素に共通のスタイルを設定するには、これらの共通コードを .container * style

したがって、次のコードをindex.cssに追加します:

.container *{
    padding:0;
    margin: 0;
}

ログイン後にコピー

2 . .container

アイデア分析

1. 上記の要件によると、width=500pxなので、中央揃えにする必要があるため、コードは margin:0 auto に変換されます;

したがって、index.css に次のコードを追加します:

.container{
    width: 500px;
    margin:0 auto;
}

ログイン後にコピー

3, .top

Thinking Analysis

1。上記の要件では、幅が 100% であることがわかっているので、タイトルを中央に表示する必要があります、つまり text-align: center; サイズは 22px、つまり font-size: 22px; がポイントですタイトルの長さが長すぎる場合は、省略記号で表示する必要があるので、次のように記述する必要があります:

text-overflow:ellipsis; (超える場合は省略記号)

overflow: hidden; (超過時に非表示)

white-space:nowrap; (超過時に行折り返しなし)

2.上の div と下の div の間の間隔 Spacing、間隔は 22px、つまり margin-bottom: 20px;

したがって、次のコードをindex.cssに追加します:

.top{
    width: 100%;
    text-align: center;
    font-size: 22px;
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
    margin-bottom: 20px;
}

ログイン後にコピー

4 , ul,li

によると、その効果は、すべての li に黒い点がないため、 list-style: none; そしてそれらは水平に配置されるため、 float: left;

したがって、 Index.css に追加されるコードは次のとおりです:

ul li{
    list-style: none;
    float: left;

}

ログイン後にコピー

5. li.clear
li はすべて浮動小数点であるため、最後の列をクリアする必要があるため、clear:both、float:none、およびその順序でレイアウトに影響を与えないように、li.clear の幅と高さは 0

に設定する必要があります。そのため、コードを次のようにindex.css に追加します:

li.clear{
    clear: both;
    float: none;
    width:0;
    height:0;
}

ログイン後にコピー

6, li.zan

同様の情報を表示する列が1列目に存在するため、右列は左マージン、右マージンがある程度あるので、margin-left:100px; margin-rightとします。 :30px;

そして、灰色の垂直線があるため、li の右側の境界線を表示できます。サイズは 1px、色はライトグレーなので、border-right: 1px Solid lightgray ;

したがって、次のようにコードをindex.cssに追加します。

li.zan{
    margin-left:100px;
    margin-right:35px;
    border-right: 1px solid lightgray;
}

ログイン後にコピー

7. li.date

日付を表示するliを表示する必要があるためです。右端にある float:right

したがって、コードを次のようにindex.cssに追加します:

li.date{
    float: right;
}

ログイン後にコピー

8, .icon

1。要件、幅と高さは両方とも 20px

なので、次のようにコードをindex.cssに追加します:

.icon{
    width:20px;
    height: 20px;
}

ログイン後にコピー

9. .fireicon

1. なぜなら、その結果、右側の要素との間に右マージンができるので、padding-right:10px;

.fireicon{
    padding-right:10px;
}

ログイン後にコピー

10 と書くことができます。 1. 要件によれば、色はグレー color:gray、フォントサイズは 16px であるため、 font-size:16px

したがって、次のようにコードをindex.css に追加します。

.text{
    color:gray;
    font-size: 16px;
}

ログイン後にコピー

これまでのところ、index.css の全体の内容は次のとおりです。

.container *{
    padding:0;
    margin: 0;
}
.container{
    width: 500px;
    margin:0 auto;
}
.top{
    width: 100%;
    text-align: center;
    font-size: 22px;
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
    margin-bottom: 20px;
}
ul li{
    list-style: none;
    float: left;

}
li.clear{
    clear: both;
    float: none;
    width:0;
    height:0;
}
li.zan{
    margin-left:100px;
    margin-right:35px;
    border-right: 1px solid lightgray;
}
li.date{
    float: right;
}

.icon{
    width:20px;
    height: 20px;
}
.fireicon{
    padding-right:10px;
}
.text{
    color:gray;
    font-size: 16px;
}

ログイン後にコピー

次に、index.css をindex.html に導入します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3文本带省略号实现案例</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="container">
       <div class="top">
            路遥《平凡的世界》，激励了无数的青年，鼓舞了无数人的心
       </div>
       <div class="bottom">
           <ul>
               <li><span class="text">超级开心果</span></li>
               <li class="zan">
                   <img  class="icon fireicon lazy"  src="/static/imghw/default1.png"  data-src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）"   / alt="CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" >
                   <img  class="icon zanicon lazy"  src="/static/imghw/default1.png"  data-src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）"   / alt="CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" >
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img  class="icon lazy"  src="/static/imghw/default1.png"  data-src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）"   / alt="CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" >
                <span class="text">0</span>
               </li>
               <li class="date"> <span class="text">2天前</span></li>
               <li class="clear"></li>
           </ul>
       </div>
    </div>
</body>
</html>

ログイン後にコピー

実行時の効果は次のとおりです。

これまでのところ、すべての要件を達成しました

概要:

1. テキストを省略記号で表示する方法を学習しました。メインのコードは次のとおりです:

text -overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

この記事が皆様のお役に立てれば幸いです、ありがとうございます。！！

以上がCSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7411

CakePHP チュートリアル

1358

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

CSSを上手に使って色々な変わった形のボタンを実現（コード付き） Jul 19, 2022 am 11:28 AM

この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。

スペースを取らずにCSS内の要素を非表示にする方法 Jun 01, 2022 pm 07:15 PM

2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。

CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM

CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレーススタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 Jun 10, 2022 pm 01:00 PM

テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。

CSS3でマウスクリックで画像を拡大する方法 Apr 25, 2022 pm 04:52 PM

実装方法: 1. ":active" セレクターを使用して、画像上のマウスクリックの状態を選択します; 2. 変換属性とscale() 関数を使用して、画像の拡大効果を実現します。構文 "img:active {transform : スケール(x 軸倍率、y 軸倍率);}"。

css3アダプティブレイアウトとは何ですか Jun 02, 2022 pm 12:05 PM

「レスポンシブレイアウト」とも呼ばれるアダプティブレイアウトとは、画面の幅を自動的に認識し、それに応じて調整できる Web ページレイアウトを指します。このような Web ページは、端末ごとに特定のバージョンを作成するのではなく、複数の異なる端末と互換性を持たせることができます。。アダプティブレイアウトは、モバイル Web ブラウジングの問題を解決するために生まれ、さまざまな端末を使用するユーザーに優れたユーザーエクスペリエンスを提供できます。

css3のアニメーション効果に変形はありますか？ Apr 28, 2022 pm 02:20 PM

css3 のアニメーション効果には変形があり、「animation: アニメーション属性 @keyframes ..{..{transform: 変換属性}}」を使用して変形アニメーション効果を実現できます。アニメーション属性はアニメーションスタイルを設定するために使用され、変形スタイルを設定するには、transform 属性を使用します。

See all articles

CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）

この記事の目標:

質問:

#それでは具体的な操作を行ってみましょう

概要:

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック