CSS 여러 줄 텍스트가 오버플로될 때 나타나는 타원에 대해

이 글은 CSS 여러 줄 텍스트가 넘칠 때 나타나는 타원의 예에 대한 관련 정보를 주로 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.

여러 줄의 텍스트가 넘치면 생략 기호가 나타납니다.

이 글에서는 2가지 방법을 권장합니다.

1.css

팁: 크롬 커널이 있는 브라우저에서만 호환됩니다. ff는 지원되지 않습니다.

.box {
    overflow: hidden; /* 溢出时不显示溢出的内容 */
    text-overflow: ellipsis; /* 发生溢出时使用省略号代替 */
    display: -webkit-box; /* chrome浏览器的私有属性。显示为box。 */
    -webkit-box-orient: vertical; /* 垂直排列元素 */
    -webkit-line-clamp: 2; /* 显示多少行 */
}

Extension

단어 포장

keyword	description	기본값	value
단어 포장	단어 줄바꿈	normal에 대한 조건을 지정합니다. 단어 하이픈 연결 지점에서 줄을 바꿉니다.	break-word, 단어 내의 줄을 바꿉니다.
overflow-wrap, css3에서 word-wrap에서 Overflow-wrap으로 변경됨

text-overflow

Keyword	Description	기본값	값
test-overflow	상자 외부의 텍스트가 표시되는 방식		클립, 텍스트 다듬기. 줄임표, 줄임표를 표시합니다. 문자열, 지정된 텍스트를 표시합니다.

white-space

Keyword	Description	Default value	Value
white-space	공백 처리 방법 및 줄바꿈 여부	일반, 공백 브라우저가 무시됩니다.	미리 비워두세요. 이제 랩하면 텍스트가 줄 바꿈되지 않습니다. 미리 포장하고 공백을 유지하고 정상적으로 포장하십시오. 줄 바꿈, 공백 병합, 개행 유지.

box-orient

이 속성은 아직 브라우저에서 지원되지 않습니다. 각 브라우저의 개인 속성을 사용해야 합니다. Child keywordesdescription value value value value value value-orient

how how how how how how a how inline-catis, child elements는 인라인 좌표 축을 따라 있습니다 (수평에 매핑됩니다. ). horizontal은 하위 요소가 수평선을 따라 왼쪽에서 오른쪽으로 정렬되도록 지정합니다. 수직, 하위 요소를 위에서 아래로 수직으로 정렬합니다. 블록 축, 하위 요소는 블록 축을 따라 있습니다(세로로 매핑됨). 상속, 상위 요소를 상속합니다. 표시할 블록 수준 요소의 행 수.

		line-clamp	크롬 코어가 있는 브라우저만 자체 비공개 속성을 지원합니다.
2.js		js를 사용하여 오버플로 텍스트 표시 방법을 제어하는 ​​방법에는 여러 가지가 있습니다. 다음은 권장되는 스크립트 파일입니다: ellipsis.js	ellipsis.js

Name

Link

ellipsis Linkhttps://www.jsdelivr.com/package/npm/ellipsis. Node.js

ellipsis

https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.jsellipsis githttps://github.com/glinford/ellipsis .js 사용 방법. 1. 스크립트 파일을 소개합니다.

<script src="https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js"></script>

2.

var ell = Ellipsis({
    lines: 3
})
var ele = document.getElementsByClassName('test')
ell.add(ele)

Extend

을 사용합니다. 구성되지 않은 경우 기본값이 사용됩니다.

{
    ellipsis: '...', // 默认显示的替代文本
    debounce: 0, // 延迟多长时间后执行
    responsive: true, // 是否有窗口大小改变时执行
    className: '.clamp', // 默认操作具有这个类的元素。
    lines: 2, // 默认只出现2行元素。
    portrait: null, // 默认不改变，如果你想要在竖屏模式下有不同的行数，
    break_word: true // 默认截断单词。
}

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

Css

에서 CSS 스타일 및 상속 방법에 대한 보다 큼 로그인 사용 정보

위 내용은 CSS 여러 줄 텍스트가 오버플로될 때 나타나는 타원에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!