CSS를 사용하여 줄 바꿈을 방지하는 방법
소개
개발자는 일반적으로 웹 페이지에서 텍스트 줄 바꿈을 좋아합니다. 래핑은 어떤 방식으로든 텍스트를 제한하고 디자인 문제를 방지합니다. 텍스트 줄 바꿈은 가로 스크롤을 방지할 수도 있습니다. 그러나 길이에 관계없이 텍스트 블록을 같은 줄에 유지하려는 경우가 있습니다. CSS white-space 속성을 사용하여 특정 요소에 대한 줄 바꿈 및 텍스트 줄 바꿈을 방지할 수 있습니다.
이 자습서에서는 동일한 텍스트 블록의 스타일을 네 가지 다른 방식으로 지정합니다. 첫 번째는 줄 바꿈을 사용한 다음 세 번은 줄 바꿈을 사용하지 않은 것입니다.
이렇게 하면 텍스트를 줄 바꿈하거나 줄 바꿈하지 않는 몇 가지 옵션이 제공됩니다.
전제 조건
이 자습서를 완료하려면 다음이 필요합니다.
nano또는 Visual Studio Code와 같은 원하는 코드 편집기- 웹 브라우저
- HTML 기본에 대한 편안함. 소개를 위해 튜토리얼 시리즈 HTML로 웹사이트를 구축하는 방법을 볼 수 있습니다.
1단계 - CSS에서 줄 바꿈 방지 및 강제 적용
이 단계에서는 세 가지 다른 클래스로 스타일 시트를 만듭니다. 각각은 줄 바꿈을 다르게 처리합니다. 첫 번째는 기본 방식으로 텍스트를 끊고 두 번째와 세 번째는 텍스트가 개행 및 줄 바꿈을 만들지 않도록 강제합니다.
먼저 nano 또는 원하는 편집기를 사용하여 main.css라는 새 파일을 만들고 엽니다.
- nano main.css
white-space를 포함하여 여러 속성을 사용하는 세 가지 CSS 클래스를 소개하는 다음 콘텐츠를 추가합니다.
.sammy-wrap {
border-radius: 6px;
background-color: aliceblue;
border: 2px dashed gray;
max-width: 70%;
padding: 1em;
margin-bottom: .4em;
}
.sammy-nowrap-1 {
border-radius: 6px;
background-color: aliceblue;
border: 2px dashed gray;
max-width: 70%;
padding: 1em;
margin-bottom: .4em;
white-space: nowrap;
}
.sammy-nowrap-2 {
border-radius: 6px;
background-color: aliceblue;
border: 2px dashed gray;
max-width: 70%;
padding: 1em;
margin-bottom: .4em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
첫 번째 클래스는 .sammy-wrap입니다. border-radius, background-color, border max-width, padding, 및 여백 하단. 이 클래스는 시각적 상자를 생성하지만 특별한 래핑 속성을 정의하지는 않습니다. 이는 기본 방식으로 줄 바꿈을 의미합니다.
두 번째 클래스는 .sammy-nowrap-1입니다. .sammy-wrap과 동일한 상자를 정의하지만 이제 다른 속성인 white-space를 추가합니다. white-space 속성에는 다양한 옵션이 있으며 모두 지정된 요소 내부의 공백을 처리하는 방법을 정의합니다. 여기에서 white-space를 nowrap로 설정하여 모든 줄 바꿈을 방지합니다.
세 번째 클래스는 .sammy-nowrap-2입니다. white-space와 text-overflow라는 두 가지 추가 속성을 추가합니다. overflow 속성은 스크롤 가능 오버플로를 처리합니다. 이는 요소 내부의 콘텐츠가 해당 요소의 가장자리를 넘어 확장될 때 발생합니다. overflow 속성은 해당 콘텐츠를 스크롤 가능, 표시 또는 숨김으로 만들 수 있습니다. overflow를 hidden으로 설정한 다음 text-overflow 속성을 사용하여 더 많은 사용자 지정을 추가합니다. text-overflow는 추가 텍스트가 숨겨져 있음을 사용자에게 알리는 데 도움이 됩니다. 이것을 줄임표로 설정했으므로 이제 줄이 끊기거나 상자 밖으로 확장되지 않습니다. CSS는 오버플로를 숨기고 숨겨진 내용을 ...로 알립니다.
파일을 저장하고 닫습니다.
이제 스타일시트가 있으므로 일부 샘플 텍스트가 포함된 짧은 HTML 파일을 만들 준비가 되었습니다. 그런 다음 브라우저에서 웹 페이지를 로드하고 CSS가 줄 바꿈을 방지하는 방법을 검사합니다.
2단계 - HTML 파일 생성
정의된 CSS 클래스를 사용하여 일부 샘플 텍스트에 적용할 수 있습니다.
원하는 편집기에서 index.html이라는 파일을 만들고 엽니다. main.css와 같은 폴더에 배치해야 합니다.
- nano index.html
main.css를 stylesheet로 연결한 다음 클래스를 샘플 텍스트 블록에 적용할 다음 콘텐츠를 추가합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSS</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<p class="sammy-wrap" > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
<p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
<p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
<p class="sammy-wrap" > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
</body>
</html>
표준 줄 바꿈 스타일을 첫 번째 텍스트 블록에, nowwrap 스타일을 두 번째 텍스트 블록에, 숨김인 nowwrap 스타일을 로 지정했습니다. 줄임표를 세 번째로. 네 번째 샘플에 sammy-wrap을 할당했지만 줄바꿈하지 않는 공백( )을 HTML에 직접 삽입하여 기본 래핑을 재정의합니다. 일회성 상황으로 줄 바꿈을 방지해야 하는 경우 줄바꿈하지 않는 공백이 빠른 솔루션을 제공할 수 있습니다.
웹 브라우저에서 index.html을 열고 결과를 봅니다. 네 개의 텍스트 블록이 다음과 같이 나타납니다.
네 가지 방식으로 줄 바꿈을 방지하거나 허용하도록 CSS 속성을 성공적으로 사용자 정의했습니다.
결론
이 자습서에서는 CSS를 사용하여 텍스트 블록에서 줄바꿈을 방지했습니다. 상자 내부의 텍스트 스타일을 지정한 다음 white-space 속성을 추가하여 기본 텍스트 줄 바꿈을 재정의했습니다. 텍스트 줄 바꿈 및 공백 처리에 대해 자세히 알아보려면 전체 white-space CSS 속성을 살펴보세요.