CSS over display는 요소의 콘텐츠가 지정된 너비나 높이를 초과할 때 오버플로 콘텐츠를 처리하는 방법을 나타냅니다. 이 경우 CSS에서 제공하는 일부 속성과 값을 사용하여 콘텐츠 너머의 표시 및 숨기기를 제어하고 페이지에서 더 아름답고 읽기 쉽게 만들 수 있습니다.

CSS 오버플로 속성

요소의 콘텐츠가 지정된 너비나 높이를 초과하는 경우 CSS의 오버플로 속성을 사용하여 오버플로된 콘텐츠가 표시되는 방식을 제어할 수 있습니다. 오버플로 속성의 값은 다음과 같습니다.

• visible: 초과 콘텐츠는 요소 외부에 표시되어 다른 요소를 가릴 수 있습니다.
• 숨김: 초과된 콘텐츠는 잘려서 페이지에 표시되지 않습니다.
• 스크롤: 콘텐츠가 넘치면 사용자가 스크롤할 수 있도록 스크롤 막대가 표시됩니다.
• auto: 콘텐츠가 넘치면 스크롤바가 표시되고, 그렇지 않으면 콘텐츠가 정상적으로 표시됩니다.

예를 들어 고정 높이 div에 일부 콘텐츠를 표시하려는 경우 콘텐츠가 div 높이를 초과하면 오버플로 속성을 스크롤하거나 숨기도록 설정할 수 있습니다.

이 예에서, p 요소가 200px 높이를 초과하면 사용자가 스크롤하여 콘텐츠를 볼 수 있도록 세로 스크롤 막대가 표시됩니다.

CSS text-overflow 속성

overflow 속성을 사용하여 콘텐츠가 초과될 때 표시되는 방법을 제어하는 ​​것 외에도 CSS의 text-overflow 속성을 사용하여 텍스트 콘텐츠가 초과될 때 표시되는 방법을 제어할 수도 있습니다. 초과했습니다. text-overflow 속성은 공백 속성이 nowrap으로 설정된 경우에만 적용됩니다.

text-overflow에는 다음 세 가지 값이 있습니다.

• clip: 텍스트가 초과되면 잘려서 페이지에 표시되지 않습니다.
• 줄임표: 텍스트를 초과하면 줄임표가 표시됩니다.
• string: 지정된 문자열이 텍스트 뒤에 표시됩니다.

예를 들어 긴 제목을 한 줄에 표시하려는 경우 제목 텍스트가 요소의 너비를 초과하는 경우 text-overflow 속성과 white-space 속성을 사용할 수 있습니다.

길고 긴 제목입니다

이 예에서는 제목 텍스트가 요소의 너비를 초과하면 텍스트가 잘렸음을 사용자에게 알리기 위해 줄임표가 표시됩니다.

CSS word-wrap 속성

overflow 및 text-overflow 속성을 사용하여 요소 콘텐츠의 오버플로 및 잘림을 제어하는 ​​것 외에도 CSS의 word-wrap 속성을 사용하여 텍스트 단어 줄 바꿈을 제어할 수도 있습니다.

기본적으로 단어가 요소 너비를 초과하면 잘려서 다음 줄에 표시됩니다. 그러나 단어 경계에서 단어가 잘리지 않고 줄 바꿈되지 않도록 하려면 word-wrap 속성을 사용할 수 있습니다.

word-wrap 속성에는 다음 두 가지 값이 있습니다.

• normal: 단어가 경계에서 분리되어 잘리지 않습니다.
• break-word: 단어는 사용 가능한 모든 곳에서 분리되며 단어가 너무 길면 잘립니다.

예를 들어 제한된 너비로 긴 텍스트를 표시하고 모든 단어가 경계에서 줄바꿈되고 모든 초과 콘텐츠가 잘리도록 하려면 다음 CSS를 사용할 수 있습니다.

길고 길고 긴 텍스트입니다. 여기에는 많은 단어가 포함되어 있지만 경계에 포함되어 잘리지 않습니다.

결론

웹페이지를 디자인할 때 일반적으로 콘텐츠를 다양한 화면 크기와 해상도에 최대한 맞춰야 합니다. 오버플로 콘텐츠가 페이지에 올바르게 표시될 수 있도록 하기 위해 페이지 레이아웃에 도움이 될 수 있는 오버플로, 텍스트 오버플로 및 단어 줄 바꿈과 같은 CSS에서 제공되는 일부 속성과 값을 사용할 수 있습니다. 페이지를 훨씬 더 명확하고 깔끔하게 보이게 만듭니다.

위 내용은 디스플레이 너머의 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!