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

この記事の目標:

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  src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" class="icon fireicon"/ alt="CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" >
                   <img  src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" class="icon zanicon"/ alt="CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" >
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img  src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" class="icon"/ 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  src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" class="icon fireicon"/ alt="CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" >
                   <img  src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" class="icon zanicon"/ alt="CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" >
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img  src="images/CSS3のText-overflowで記事タイトルの省略記号表示効果を実装（コード例）" class="icon"/ 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>

ログイン後にコピー

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

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