css 단행, 다행 초과 디스플레이 생략호 호환 화호 구현
p{
overflow:hidden;//
text-overflow:ellipsis;//
white-space:nowarp;//
}
보충: white-space, 요소 내 텍스트의 공백 문자, 줄 바꾸기 문자, 줄 바꾸기 허용 여부를 처리하는 데 사용됩니다.선택할 수 있는 값은normal(기본값),pre,nowrap,pre-wrap,pre-line입니다.word-wrap은 브라우저가 단어에서 문장을 끊는 것을 허용하는지 표시하는 데 사용되며, 문자열이 너무 길어서 자연스러운 문장을 찾을 수 없을 때 넘침 현상을 방지하기 위해서입니다.선택 값break-word word-break은 단어 내의 단문을 어떻게 하는지 표시하는 데 사용됩니다.기본값normal, 선택할 수 있는 값은break-all,keep-all입니다.
css 여러 줄 텍스트가 줄임표 보이기 초과
p{
overflow:hidden;//
text-overflow:ellipsis;//
display:-webkit-box;//
-webkit-box-orient:vertical;//
-webkit-box-clamp:2// ，
}
그래서 불여우에서 - 웹키트-box-clamp:2는 효력이 발생하지 않습니다
여우의 여러 줄 텍스트가 줄임표를 초과합니다
우선 스타일 코드가 불여우에만 적용되려면
@-moz-documentc url-prefix(){
p{
position: relative;
line-height: 20px;
max-height: 40px;// ， overflowhidden， ，
overflow: hidden;
}
p::after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;// ， ， ...
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);//
}
}
원리는 자기가 한 줄... 마지막 줄의 끝에 놓는 것이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
