CSS3에서 텍스트 오버플로 숨기기 및 줄임표 효과 표시를 구현하는 방법-CSS 지식-php.cn

CSS3에서 텍스트 오버플로 숨기기 및 줄임표 효과 표시를 구현하는 방법

藏色散人

풀어 주다： 2018-11-14 18:12:32

원래의

8709명이 탐색했습니다.

이 글에서는 주로 텍스트 오버플로 숨기기 및 줄임표 표시 효과를 구현하는 css3 방법을 소개합니다.

프런트 엔드 페이지 개발 과정에서 텍스트 내용이 너무 많은 경우 사용자 경험을 개선하고 사용자가 쉽게 읽을 수 있도록 텍스트 오버플로를 숨기고 줄임표를 표시하는 효과를 구현해야 합니다. . 분명히 줄임표는 표시되지 않은 내용이 뒤에 많이 있다는 것을 의미합니다. 따라서 프런트엔드 초보자의 경우 이 효과를 얻는 방법을 모를 수도 있습니다.

아래에서는 간단한 코드 예제를 사용하여 css3을 사용하여 텍스트 오버플로를 숨기고 줄임표 를 표시하는 효과를 소개합니다.

코드 예제는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Css3实现文本溢出隐藏效果</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        .main .one p {
            width: 500px;
            text-indent: 3em;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .main .one p:hover {
            text-overflow: inherit;
            overflow: visible;
            white-space: inherit;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="one">
        <p>PHP（外文名:PHP: Hypertext
            Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP
            独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。</p>
    </div>
</div>
</body>
</html>

로그인 후 복사