> 웹 프론트엔드 > CSS 튜토리얼 > CSS에서 텍스트가 여러 줄로 줄 바꿈되지 않도록 하는 방법은 무엇입니까?

CSS에서 텍스트가 여러 줄로 줄 바꿈되지 않도록 하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-29 15:43:10
원래의
833명이 탐색했습니다.

How to Keep Text from Wrapping to Multiple Lines in CSS?

텍스트가 한 줄을 초과하지 않도록 방지하는 방법

텍스트가 여러 줄로 넘어가는 것을 방지하는 문제는 적절한 CSS 속성을 사용하여 극복할 수 있습니다. . 특정 높이가 설정되고 Overflow: Hidden이 적용되었지만 텍스트가 여전히 여러 줄로 나누어지는 경우 다음 해결 방법 구현을 고려해 보세요.

해결 방법:

텍스트가 길이에 관계없이 한 줄에 유지되도록 하려면 다음 CSS를 구현하세요. 속성:

div {
  white-space: nowrap;
  overflow: hidden;
}
로그인 후 복사

설명:

  • 공백: nowrap; 텍스트가 여러 줄로 바뀌는 것을 방지하여 한 줄에 유지되도록 합니다.
  • overflow: hide; 요소 너비를 초과하는 모든 텍스트가 잘려 표시되지 않도록 합니다.

예:

HTML 문서 내에서 이 솔루션을 구현하는 방법은 다음과 같습니다. 다음은 다음과 같습니다.

<div>
  <p>testing quite a lot of text that just doesn't wrap because it is too long a run-on sentance with so many useless words for you to not read today despite every effort you make to do so including stretching your browser width to the maximum length unless however you utilized your browser's zooming out feature or manually modifying the CSS in which case you are definitely cheating and ruining this fun little game of me typing out as many words as can be fitted into one ridiculously long run-on sentence of the twenty-first century anno domini using my traditional keyboard and two monitors at 1080p while going through every effort to painstakingly ramble on and on but just not exactly repeating myself short of reusing a couple of words in multiple places throughout this HTML even though that would be about a thousand times easier than what I'm currently doing on this day to pointlessly avoid work regardless of its futility given that it'll only create consequences for myself in having to work harder to catch up later of course all of that notwithstanding moderation efforts to tone back my extensive efforts to make this somewhat enjoyable to read while making it as long as possible who may or may not revert this edit in spite of its usefulness since the previous edit only contained four words that could not possibly wrap even without the CSS changes due to their short nature which is invariably going to create more questions than it answers such as can be found in the comments section which is exactly why I created this effort in order to address one of those about the purpose of the overflow attribute which if you have modified you will now see lets you read the entirety of this text through the benefits of horizontal scrolling features but on the other hand if only overflow was used and text-wrap was left out then you will continue to see a vertical scrollbar unless you set a fixed height for this div in which case you certainly should see that vertical overflow is hidden though that would only happen if you did not put this example into fullscreen short of having your viewport set to a small enough height which can actually be further defined to a designated number of lines as opposed to one by using a height set to a multiple of the CSS property defined by line-height which could be a percentage of white-space and that would indeed hide the vertical overflow of this mountain of text which I'm really quite surprised that you managed to linger on here to read through its frivolous nature on the famed site known by programmers as Stack Overflow and for that I congratulate you for potentially wasting your time</p>
</div>
로그인 후 복사

이 구현은

길이에 관계없이 요소가 여러 줄로 줄 바꿈되지 않도록 합니다.

위 내용은 CSS에서 텍스트가 여러 줄로 줄 바꿈되지 않도록 하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿