사용자 정의 텍스트 오버플로 시나리오 요약(코드)-CSS 튜토리얼-php.cn

사용자 정의 텍스트 오버플로 시나리오 요약(코드)

不言

풀어 주다： 2018-09-07 14:02:32

원래의

1840명이 탐색했습니다.

웹 페이지에서 때로는 완료되지 않은 텍스트 단락과 줄임표가 표시되는 경우가 있습니다. 이것이 실제로 텍스트 오버플로를 처리하는 방법입니다. 이 기사에서는 여러 줄의 텍스트 오버플로에 대한 솔루션을 소개합니다.

1. 한 줄 텍스트 오버플로는 가장 일반적인 형식입니다. 점-점을 달성하려면 텍스트 오버플로의 줄임표를 사용하세요. 동시에, 컨테이너는 줄 바꿈을 허용해서는 안 됩니다. 나타나지 않습니다. Dot dot dot

사용자 정의 텍스트 오버플로 시나리오 요약(코드)

.ellipsis {
   width: 300px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

로그인 후 복사

2. 여러 줄의 텍스트가 넘칩니다. dot dot

내용이 늘어나면서 한 줄의 텍스트로는 충분하지 않고, 여러 줄의 텍스트가 가장 많이 사용됩니다. 4가지 속성이 필수입니다. 가장 중요한 속성은 표시할 줄 수를 직접 정의하는 -webkit-line-clamp입니다.

사용자 정의 텍스트 오버플로 시나리오 요약(코드)

.ellipsis {
    width: 300px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 自定义的行数 */
    overflow: hidden;
}

로그인 후 복사

3. Dot-dot은 가장 흔한 Overflow 생략 방식이지만, 21세기 디자이너들은 더 이상 점-점 방식을 사용하여 생략하는 것에 만족하지 않으며, 마지막에 더 많은 버튼을 표시하고 클릭한 후에 전체 내용을 표시해야 합니다. 이때, 다음과 같은 궁극적인 해결책이 정말 훌륭합니다. 여기로 이동하여 스승님의 설명을 들어보세요,

//dom结构
<div>
    <div>
        <div>腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</div>
        <div>
            <div></div>
            <div>...更多</div>
        </div>
    </div>
</div>

로그인 후 복사

.ellipsis {
    position: relative;
    width: 100%;
    max-height: 55px; /* h*n */
    line-height: 18px; /* h */
    overflow: hidden;
    width: 300px
}
.ellipsis-container {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* n */
    font-size: 50px; /* w */
    color: transparent;
}
.ellipsis-content {
    color: #000;
    display: inline;
    vertical-align: top;
    font-size: 16px; /* f */
}
.ellipsis-ghost {
    position:absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    color: #000;
}
.ellipsis-ghost:before {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 100%;
}
.ellipsis-placeholder {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 55px; /* h*n */
}
.ellipsis-more {
    position: relative;
    float: right;
    font-size: 16px; /* f */
    width: 50px; /* w */
    height: 18px; /* h */
    margin-top: -18px; /* -h */
    color: red
}

로그인 후 복사