오버플로 숨기기: CSS를 사용한 콘텐츠 오버플로 문제에 대한 가장 포괄적인 솔루션

p 레이아웃에서는 일부 텍스트 콘텐츠가 제한을 초과하는 높이를 초과하고 일부 사진이 DIV를 초과하여 웹 페이지가 잘못 정렬되고 혼란스러워집니다. 콘텐츠가 컨테이너를 넘치고 컨테이너에서 제한한 너비와 높이를 초과하는 경우 어떻게 해야 하나요? 텍스트의 오버플로 부분을 숨기거나 를 줄임표로 바꿀 수 있습니다. 이 문서에서는 이러한 오버플로 문제를 해결하기 위해 줄바꿈, 타원 등을 사용하는 방법을 설명합니다.

1. 줄 바꿈을 사용하여 오버플로 문제 해결

1. 단어 줄바꿈을 사용하여 텍스트 오버플로 문제를 해결하는 방법

word-break:break-all 및 word-wrap :break-word 긴 문자열 줄 바꿈 문제를 해결하는 데 자주 사용됩니다. word-break:break-all은 IE6/7/chrome/safari에서 동일하며 꼬리 잘림으로 작동하는 반면 ff3.0/opera는 유효하지 않은 것으로 작동합니다. 너무 긴 단어는 새 줄에 표시되고 경계를 넘습니다. word-wrap:break-word; IE6/7/chrome/safari에서도 동일합니다. 긴 단어가 줄바꿈되어 더 이상 표시될 수 없으면 잘립니다. 그리고 ff3.0/opera도 유효하지 않은 것 같습니다.

2. CSS 오버플로 및 줄바꿈 처리 방법

텍스트가 너무 길어서 컨테이너에 표시할 수 없는 경우 white-space: Normal / nowrap을 사용하시겠습니까? 속성, 일반: 브라우저 기본 설정 사용, nowrap: 줄 바꿈 없음.

오버플로를 처리하는 방법 오버플로 내용을 숨기려면

text-overflow 속성을 사용하는 것이 좋습니다.

3.

Firefox/IE 브라우저 플래시는 투명하고 CSS는 강제로 래핑되지 않으며 오버플로는 숨겨집니다

css는 강제로 래핑되지 않으며 오버플로는 숨겨집니다.

overflow:hidden

지침 및 포인트 :

◎ 검색 또는 개체의 내용이 지정된 높이와 너비를 초과하는 경우 관리 방법을 설정합니다.

◎ 텍스트 영역 개체를 숨겨진 값으로 설정하면 스크롤 막대가 숨겨집니다.
◎ 테이블의 경우 table-layout 속성이 고정으로 설정되면 td 객체는 기본값이 Hidden인 오버플로 속성을 지원합니다. 숨김, 스크롤 또는 자동으로 설정하면 td 크기를 초과하는 콘텐츠가 잘립니다. 표시로 설정하면 ◎의 오른쪽이나 왼쪽 셀에 추가 텍스트가 넘치게 됩니다(방향 속성 설정에 따라 다름).
◎ IE5부터 MAC 플랫폼에서 이 속성을 사용할 수 있습니다. 해당 스크립트 기능은 오버플로입니다.

2. 줄임표를 사용하여 오버플로 문제 해결

1. HTML 텍스트 제어 표시 단어 수가 줄임표 사용 방법을 초과합니다

일반적으로 p+css를 사용하는 컨테이너의 텍스트가 길이를 초과하면 상자 밖으로 떠다니거나 상자가 확장되는 경우가 있습니다. 때로는 브라우저 호환성 문제를 고려해야 합니다. Firefox는 표준 브라우저로 인정받고(물론 Opera도 마찬가지임) 시장 점유율이 더 높기 때문에 Firefox를 인증에 사용할 수 있습니다.

2.

CSS, j의 한 줄 및 여러 줄 텍스트 오버플로 표시 줄임표

프로젝트에서 실제 설명 텍스트가 너무 많아서 초기 페이지의 세로 길이가 너무 길어서 줄였습니다. 나머지 정보의 활용 텍스트가 너무 많으면 줄 수를 초기화해야 합니다. CSS 한 줄 및 여러 줄 텍스트가 넘치고 타원이 표시됩니다.

3.

한 줄과 여러 줄의 텍스트가 넘칠 때 타원을 표시하는 방법 요약

프런트 엔드 페이지 레이아웃에서는 텍스트가 너무 많으면 페이지 레이아웃이 영향을 받는 경우가 많습니다. 특히 모바일 페이지에서 화면 너비가 충분하지 않은 경우 단락 텍스트가 완전히 표시되면 레이아웃이 중단됩니다. 따라서 화면의 자유 크기에 따라 단락 텍스트가 표시될 수 있으면 완벽할 것입니다. 즉, 화면이 충분히 크면 단락 텍스트가 화면이 작으면 단락 텍스트가 완전히 표시됩니다. 부분적으로 줄임표 형태로 표시됩니다.

4. 테이블의 내용이 레이아웃 방법을 초과합니다

테이블에 너무 많은 텍스트 콘텐츠를 입력하면 행이 너무 길거나 자동으로 줄 바꿈되는 등 테이블이 복잡해집니다. 그러나 때로는 고정된 너비로 행에 표시하고 싶을 때도 있습니다. 추가 부분을 점으로 대체하면 테이블이 복잡해지지 않습니다.

5. 제목 표시 문자 수 초과 시 줄임표 교체 문제 해결 객체의 텍스트가 오버플로될 때 줄임표 표시(...)

CSS 콘텐츠 오버플로 및 숨기기에 대한 질문과 답변

1. javascript를 사용하여 p가 오버플로되었는지 확인하는 방법은 무엇입니까? 2. css3 - 목록이 가로로 오버플로되면 줄임표가 표시됩니다. (줄임표는 그림입니다.)

3. 오버플로가 숨겨진 후 내부 요소의 높이를 얻는 방법은 무엇입니까?

【관련 추천】1.

php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼

위 내용은 오버플로 숨기기: CSS를 사용한 콘텐츠 오버플로 문제에 대한 가장 포괄적인 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!