웹 프론트엔드 프런트엔드 Q&A CSS에서 텍스트 줄 바꿈을 방지하는 방법

CSS에서 텍스트 줄 바꿈을 방지하는 방법

Apr 26, 2023 pm 04:13 PM

웹 개발에서는 텍스트의 전체 단락을 셀이나 컨테이너에 표시해야 하는데 텍스트가 너무 길어서 줄바꿈이 발생하여 모양에 영향을 미치는 경우가 종종 있습니다. 이때 CSS 스타일 컨트롤을 사용하면 텍스트 줄바꿈을 방지하고 더욱 아름다운 레이아웃을 얻을 수 있습니다.

다음은 CSS에서 텍스트가 줄바꿈되지 않도록 제어하는 ​​몇 가지 방법입니다.

1. 공백 속성

CSS에서는 공백 속성을 사용하여 텍스트 레이아웃을 제어합니다. 기본적으로 공백 속성의 값은 "normal"입니다. 즉, 공백, 개행, 탭 등과 같은 공백 문자를 만나면 자동으로 줄 바꿈되고 더 이상 조판되지 않습니다. 텍스트가 줄바꿈되지 않도록 "nowrap"으로 설정하기만 하면 됩니다.

예제는 다음과 같습니다.

1

2

3

.container {

  white-space: nowrap;

}

로그인 후 복사

위 코드에서 .container는 스타일 제어가 필요한 컨테이너를 나타냅니다. white-spacenowrap 이렇게 하면 텍스트가 줄 바꿈되는 것을 방지할 수 있습니다. <code>.container表示需要进行样式控制的容器,将white-space设为nowrap即可让文本不换行。

二、overflow属性

另一种控制文本不换行的方法是使用overflow属性。利用这个属性可以让容器中内容超出容器范围时,隐藏或显示滚动条。在这里,我们可以将overflow的值设置为“hidden”,这样可以将支流超出容器范围的文本隐藏,同时文本也不会换行。

示例如下:

1

2

3

.container {

  overflow: hidden;

}

로그인 후 복사

上述代码中,.container表示进行样式控制的容器,将overflow设为hidden即可让文本不换行。

三、text-overflow属性

在一些情况下,文本太长,但不能隐藏,需要显示部分文本内容,并以省略号表示未显示部分,这时就可以使用text-overflow属性。利用这个属性可以让文本超过一定长度时显示省略号,同时文本不会换行。

示例如下:

1

2

3

4

5

.container {

  overflow: hidden;   /* 必须要设置overflow属性值为“hidden” */

  white-space: nowrap;  /* 禁止文本换行 */

  text-overflow: ellipsis;  /* 超出容器大小的文本以省略号表示 */

}

로그인 후 복사

上述代码中,.container表示进行样式控制的容器,将overflow设为hiddenwhite-space设为nowraptext-overflow设为ellipsis

2. 오버플로 속성

텍스트 줄 바꿈을 제어하는 ​​또 다른 방법은 오버플로 속성을 사용하는 것입니다. 컨테이너의 콘텐츠가 컨테이너 범위를 초과할 때 스크롤 막대를 숨기거나 표시하려면 이 속성을 사용합니다. 여기서 오버플로 값을 "hidden"으로 설정하여 컨테이너 범위를 벗어나는 지류의 텍스트를 숨길 수 있고 텍스트가 줄 바꿈되지 않도록 할 수 있습니다.

예는 다음과 같습니다. 🎜rrreee🎜위 코드에서 .container는 스타일 제어를 위한 컨테이너를 나타냅니다. overflowhidden으로 설정합니다. 그것을 만들기 위해 텍스트가 줄 바꿈되지 않습니다. 🎜🎜3. 텍스트 오버플로 속성 🎜🎜텍스트가 너무 길어서 숨길 수 없는 경우가 있는데, 표시되지 않는 부분은 줄임표로 표시됩니다. 속성을 사용할 수 있습니다. 텍스트가 특정 길이를 초과하면 줄임표를 표시하고 텍스트가 줄 바꿈되지 않도록 하려면 이 속성을 사용합니다. 🎜🎜예제는 다음과 같습니다. 🎜rrreee🎜위 코드에서 .container는 스타일 제어를 위한 컨테이너를 나타냅니다. overflowhidden으로 설정하세요. , white-spacenowrap로 설정하고 text-overflowellipsis로 설정하여 텍스트 줄 바꿈을 방지하고 줄임표를 표시합니다. 🎜🎜요약: 🎜🎜위에서는 공백 속성, 오버플로 속성 및 텍스트 오버플로 속성을 사용하여 텍스트가 줄 바꿈되지 않도록 제어하는 ​​세 가지 방법을 소개합니다. 어떤 방법을 사용할지는 특정 요구 사항에 따라 다릅니다. 개발 과정에서 아름다움과 가독성을 위해 이러한 기본적인 CSS 스타일 제어 기술을 익혀야 합니다. 🎜

위 내용은 CSS에서 텍스트 줄 바꿈을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

게으른 하중의 개념을 설명하십시오. 게으른 하중의 개념을 설명하십시오. Mar 13, 2025 pm 07:47 PM

게으른 하중의 개념을 설명하십시오.

useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까? useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까? Mar 19, 2025 pm 03:58 PM

useeffect 란 무엇입니까? 부작용을 수행하는 데 어떻게 사용합니까?

React Reconciliation 알고리즘은 어떻게 작동합니까? React Reconciliation 알고리즘은 어떻게 작동합니까? Mar 18, 2025 pm 01:58 PM

React Reconciliation 알고리즘은 어떻게 작동합니까?

카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까? 카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까? Mar 18, 2025 pm 01:45 PM

카레는 JavaScript에서 어떻게 작동하며 그 이점은 무엇입니까?

JavaScript의 고차 기능은 무엇이며 어떻게 간결하고 재사용 가능한 코드를 작성하는 데 어떻게 사용할 수 있습니까? JavaScript의 고차 기능은 무엇이며 어떻게 간결하고 재사용 가능한 코드를 작성하는 데 어떻게 사용할 수 있습니까? Mar 18, 2025 pm 01:44 PM

JavaScript의 고차 기능은 무엇이며 어떻게 간결하고 재사용 가능한 코드를 작성하는 데 어떻게 사용할 수 있습니까?

각 라이프 사이클 방법의 목적과 사용 사례를 설명하십시오. 각 라이프 사이클 방법의 목적과 사용 사례를 설명하십시오. Mar 19, 2025 pm 01:46 PM

각 라이프 사이클 방법의 목적과 사용 사례를 설명하십시오.

React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까? React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까? Mar 18, 2025 pm 01:57 PM

React의 성능 최적화 기술 (메모 화, 코드 분할, 게으른로드)은 무엇입니까?

usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까? usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까? Mar 19, 2025 pm 03:59 PM

usecontext는 무엇입니까? 구성 요소간에 상태를 공유하는 데 어떻게 사용합니까?

See all articles