웹 페이지에서 때로는 완료되지 않은 텍스트 단락과 줄임표가 표시되는 경우가 있습니다. 이것이 실제로 텍스트 오버플로를 처리하는 방법입니다. 이 기사에서는 여러 줄의 텍스트 오버플로에 대한 솔루션을 소개합니다.
.ellipsis {
width: 300px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
2. 여러 줄의 텍스트가 넘칩니다. dot dot
.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!