CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예).-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예).

易达

Jun 05, 2020 pm 04:01 PM

css3text-overflow

이 글의 목표:

1. 줄임표를 사용하여 텍스트 표시 효과 익히기

질문:

1 다음 효과를 얻으려면 순수 DIV+CSS가 필요하며 적용 가능한 프레임워크가 없습니다.

CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예).

추가 안내

1. 전체 너비는 500px이고, 페이지 중앙에 표시됩니다

2. 제목 글꼴 크기는 22px이고, 다른 글꼴은 16px입니다.

3. 맨 왼쪽에 2일 전 시간이 표시됩니다.

4 , 모든 작은 아이콘이 20px 크기로 표시됩니다

5 제목의 전체 텍스트는 Lu Yao의 "Ordinary World"입니다. 수많은 젊은이들에게 영감을 주고 수많은 사람들의 마음을 감동시켰습니다

이제 구체적인 작업을 해보겠습니다

1. 자료 준비: 루트 디렉터리에 이미지 폴더를 만들고 모든 관련 자료 사진을 여기에 저장합니다.

CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예).

CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예). 2. index.html을 만들고 구조를 작성합니다.

CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예).

아이디어 분석:

1. 은(는) 큰 제목이지만 이 제목에는 텍스트가 컨테이너의 최대 너비를 초과했음을 나타내는 줄임표가 있습니다.

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의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." class="icon fireicon"/ alt="CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." >
                   <img  src="images/CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." class="icon zanicon"/ alt="CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." >
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img  src="images/CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." class="icon"/ alt="CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." >
                <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 * 스타일로 작성됩니다. 그래서 index.css에 추가된 코드는 다음과 같습니다.

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

2. 코드는 margin: 0 auto;

그래서 index.css에 다음 코드를 추가하세요:

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

3.top

Thinking analyze

1. , 그리고 제목은 중앙에 표시되어야 합니다. 즉, text-align: center; 크기는 22px입니다. 즉, 글꼴 크기: 22px입니다. 제목이 너무 길면 줄임표로 표시되므로 이 경우 다음과 같이 작성해야 합니다:

text-overflow:ellipsis; (초과 시 줄임표 포함)

overflow:hidden; (초과 시 숨겨짐)

white-space:nowrap ; (초과시 줄 바꿈 없음)

2. 위쪽과 아래쪽 div 사이에 일정한 간격이 있으며 간격은 22px, 즉 margin-bottom: 20px;

다음 코드를 색인에 추가합니다. css:

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

4, ul,li

효과에 따라 all li 검은 점이 없으므로 list-style: none; 가로로 배열되므로 float: left; index.css는 다음과 같습니다:

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

}

5. li.clear
li는 모두 부동이므로 마지막 열은 부동을 지워야 하므로 모두 삭제하고, 부동: 없음, 그리고 li의 레이아웃에 영향을 주지 않도록 합니다. .clear, 너비와 높이가 0

으로 설정되어야 하므로 index.css에 다음과 같은 코드를 추가하세요.

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

6.li .zan

like 정보가 표시되는 열에는 일정한 왼쪽 여백이 있기 때문입니다. 첫 번째 열과 오른쪽 열에 오른쪽 여백이 있으므로 margin-left:100px; margin-right:30px;

그리고 회색 세로선도 있으므로 오른쪽 테두리를 표시할 수 있습니다. li는 크기가 1px이고 색상이 밝은 회색이므로 테두리 오른쪽: 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. height는 둘 다 20px

이므로 index.css에 추가된 코드는 다음과 같습니다.

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

9, .fireicon

1 결과에 따르면 오른쪽 요소와 올바른 여백이 있으므로 padding-right:10px;

.fireicon{
    padding-right:10px;
}

10, .text

1로 작성할 수 있습니다. 요구 사항에 따라 색상은 grey color:gray이고 글꼴 크기는 16px이므로 글꼴 크기: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.html에 index.css를 추가하세요

<!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의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." class="icon fireicon"/ alt="CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." >
                   <img  src="images/CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." class="icon zanicon"/ alt="CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." >
                   <span class="text">45</span>
               </li>
               <li class="liuyan">
                <img  src="images/CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." class="icon"/ alt="CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예)." >
                <span class="text">0</span>
               </li>
               <li class="date"> <span class="text">2天前</span></li>
               <li class="clear"></li>
           </ul>
       </div>
    </div>
</body>
</html>

실행 효과는 다음과 같습니다.

지금까지 모든 요구사항을 충족했습니다