CSS 제한을 초과하여 표시되도록 줄임표를 설정하는 방법: 1. "overflow:hidden;" 문을 사용하여 초과된 부분을 숨깁니다. 2. 줄임표를 표시하려면 "text-overflow:ellipsis;"를 사용하세요. 텍스트가 포함된 요소를 오버플로합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
Css 설정은 디스플레이 너머에 줄임표가 표시되는 경우 두 가지 상황으로 나눌 수 있습니다.
한 줄의 텍스트가 넘치면 줄임표가 표시됩니다...
여러 줄의 텍스트가 넘치면 줄임표가 표시됩니다. ..
그러나 사용되는 핵심 코드는 동일합니다. 먼저 "overflow:hidden;"을 사용하여 초과 부분을 숨긴 다음 "text-overflow:ellipsis;"를 사용하여 텍스트를 줄임표로 표시해야 합니다. 초과할 때.
overflow: hide;
개체 크기를 초과하는 내용을 표시하지 않습니다. 즉, 초과된 부분을 숨깁니다. overflow:hidden;
不显示超过对象尺寸的内容,就是把超出的部分隐藏了;
text-overflow:ellipsis;
text-overflow: ellipsis;
텍스트 개체 오버플로가 표시되면... 물론 점을 표시하지 않도록 클립 속성을 설정할 수도 있습니다. 1. .
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{margin: 0px;padding: 0px;} .box{width: 300px;height: 500px;margin: 50px auto;} .overflow{ width:220px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow:ellipsis; } </style> </head> <body> <div class="box"> <p> css单行文本超出长度显示省略号 </p> <p class="overflow"> css单行文本超出长度显示省略号 </p> </div> </body> </html>
2. 여러 줄의 텍스트가 넘치고 줄임표가 표시됩니다...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{margin: 0px;padding: 0px;} .box{ width: 280px; height: 62px; margin: 50px auto; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } </style> </head> <body> <div class="box"> css多行文本超出长度显示省略号,css多行文本超出长度显示省略号, css多行文本超出长度显示省略号,css多行文本超出长度显示省略号。 </div> </body> </html>
(동영상 공유 학습: css 동영상 튜토리얼
)위 내용은 디스플레이 타원을 초과하도록 CSS를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!