페이지에 텍스트가 너무 많은 경우 CSS를 사용하여 초과 텍스트 표시 타원을 만드는 방법은 무엇입니까? (단일/다중 라인 코드 데모)-CSS 튜토리얼-php.cn

페이지에 텍스트가 너무 많은 경우 CSS를 사용하여 초과 텍스트 표시 타원을 만드는 방법은 무엇입니까? (단일/다중 라인 코드 데모)

藏色散人

풀어 주다： 2018-08-09 16:04:19

원래의

2427명이 탐색했습니다.

페이지의 텍스트가 너무 길면 사용자의 시각적 경험에 해로울 뿐만 아니라 웹사이트 내 최적화에도 해롭습니다. 그렇다면 CSS를 사용하여 확장된 부분에 줄임표를 대신 표시하려면 어떻게 해야 할까요? 이 기사에서는 CSS의 초과 부분에 줄임표를 표시하는 방법에 대해 자세히 소개합니다. 도움이 필요한 분들에게 도움이 되기를 바랍니다!

CSS의 과잉 부분에 줄임표를 표시하는 구체적인 샘플 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css超出部分省略显示测试</title>
    <style>
        .app {
            width: 400px;
            height: 28px;
            line-height: 28px;
            margin: 50px 0 0 50px;
            border: 1px solid red;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="app">
    <span class="content">php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。</span>
</div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

페이지에 텍스트가 너무 많은 경우 CSS를 사용하여 초과 텍스트 표시 타원을 만드는 방법은 무엇입니까? (단일/다중 라인 코드 데모)

참고: 위는 줄임표의 오버플로 표시를 구현하기 위한 것입니다. text-overflow:ellipsis 속성을 사용하는 한 줄의 텍스트이며 너비를 늘려야 합니다. 너비 속성은 부분 탐색을 수용하는 데 사용됩니다.

그렇다면 한 줄의 조작법을 알면 여러 줄의 작업도 간단해집니다. 다중 행 구현 방법은 주로 다음 코드입니다.

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;

로그인 후 복사

css는 생략된 부분의 호환 범위를 벗어납니다.
WebKit의 CSS 확장 속성을 사용하기 때문에 이 방법은 WebKit 브라우저 및 모바일 터미널에 적합합니다. 참고:

-webkit -line-clamp는 블록 요소에 표시되는 텍스트 줄 수를 제한하는 데 사용됩니다. 이 효과를 얻으려면 다른 WebKit 속성과 결합해야 합니다. 일반적으로 결합되는 속성:

display: -webkit-box; 객체를 유연한 상자 모델로 표시하기 위해 결합해야 하는 속성입니다.

-webkit-box-orient는 플렉스 박스 객체의 하위 요소 배열을 설정하거나 검색하기 위해 속성과 결합되어야 합니다.

위 내용은 페이지에 텍스트가 너무 많은 경우 CSS를 사용하여 초과 텍스트 표시 타원을 만드는 방법은 무엇입니까? (단일/다중 라인 코드 데모)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

페이지에 텍스트가 너무 많은 경우 CSS를 사용하여 초과 텍스트 표시 타원을 만드는 방법은 무엇입니까? (단일/다중 라인 코드 데모)