CSS에서 텍스트 오버플로 줄임표를 구현하는 네 가지 방법(코드 포함)

이 글은 CSS에서 (코드 포함) 텍스트 오버플로 줄임표를 구현하는 네 가지 방법에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

프로젝트에서는 한 줄 또는 여러 줄 뒤에 줄임표를 구현하는 작업이 포함됩니다. -webkit-line-clamp 및 -webkit-box-orient 속성이 사용됩니다. , webpack Packaging-webkit-box-orient 속성은 무시됩니다. 여기에 레코드

1이 있습니다. 텍스트 줄임표

/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出宽度则显示ellipsis省略号 */
text-overflow: ellipsis;
width: 100%;

#🎜 🎜#

2 텍스트 줄임표를 구현하는 행

display: -webkit-box;
-webkit-box-orient: vertical;  /* 设置方向 */
-webkit-line-clamp: 2;  /* 设置超过为省略号的行数 */
overflow: hidden;

#🎜🎜 #

웹팩 패키징 도구를 사용할 때 -webkit-box-orient 속성은 무시됩니다. 다음과 같이 변경하면 됩니다.

• display: -webkit-box; 
  overflow: hidden;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 8;
  text-overflow: ellipsis;

#🎜 🎜 #3. js를 사용하여 단어 수 뒤에 줄임표를 추가합니다.

white-space:normal (자동 줄 바꿈), 작성된 텍스트가 정의된 너비를 초과하면 자동으로 줄 바꿈되지만, 작성된 데이터가 문자 또는 문자 묶음인 경우 공백 없는 숫자, 컨테이너 너비를 초과하면 컨테이너가 줄바꿈 없이 확장됩니다.

다음을 사용할 수 있습니다: word-break:break-all;word -wrap:break- 해결할 단어

• word-break:break-all 컨테이너의 너비를 초과할 때 단어가 너무 길면 단어가 잘려서 따로 작성하세요#🎜🎜 #

word-wrap:break-word 컨테이너의 너비를 초과할 때 단어가 너무 길면 단어가 위에 배치됩니다. 단어를 자르지 않고 다음 줄

• word-break : Normal | break-all
normal : 단어 내 줄바꿈 허용 #🎜🎜 #break-all : 단어 내에서 줄 바꿈을 허용합니다.
• keep-all : 반자 공백이나 하이픈에서만 줄 바꿈을 허용합니다.
  word-wrap : 일반 | break-word
normal : 콘텐츠가 지정된 컨테이너 경계에 대해 푸시되도록 허용
• break-word : 콘텐츠가 경계 내에서 래핑됩니다. 필요하다면 단어 나누기도 발생합니다

위 내용은 CSS에서 텍스트 오버플로 줄임표를 구현하는 네 가지 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!