>  기사  >  웹 프론트엔드  >  사용자 정의 텍스트 오버플로 시나리오 요약(코드)

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

不言
不言원래의
2018-09-07 14:02:321819검색

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

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
}
관련 권장 사항: 사용자 정의 텍스트 오버플로 시나리오 요약(코드)CSS 싱글의 줄임표 문제 -라인 텍스트 및 여러 줄 오버플로 텍스트

CSS 한 줄 및 여러 줄 텍스트 오버플로 표시 ellipses_html/css_WEB-ITnose

위 내용은 사용자 정의 텍스트 오버플로 시나리오 요약(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.