줄바꿈 없이 HTML 표시를 구현하는 방법

HTML은 줄 바꿈 없이 표시됩니다.

HTML에서는 기본적으로 텍스트가 자동으로 줄 바꿈됩니다. 브라우저 창의 가장자리나 설정된 너비에 도달하면 자동으로 줄 바꿈됩니다. 하지만 때로는 텍스트가 줄 바꿈되지 않도록 해야 합니다. ?

다음은 줄바꿈되지 않은 표시를 달성하는 여러 가지 방법입니다.

1. 태그 사용

태그는 텍스트가 자동으로 줄 바꿈되는 것을 방지하는 HTML의 비표준 태그입니다.

예:

<nobr>这是一段不换行的文字</nobr>

브라우저에 표시되는 효과는 다음과 같습니다. 줄 바꿈이 없는 텍스트입니다.

그러나 태그는 HTML5에서 더 이상 사용되지 않으며 더 이상 권장되지 않습니다.

2. CSS의 공백 속성 사용

CSS의 공백 속성은 요소 내부의 공백 문자가 표시되는 방식을 제어할 수 있습니다. 여기에는 몇 가지 공통 값이 있습니다.

• normal: 일반 줄바꿈 규칙입니다.
• nowrap: <br> 태그가 발견되지 않는 한 텍스트가 줄 바꿈되어서는 안 됩니다. <br> 标签。
• pre：保留空白符序列，但是正常换行（只有在遇到 <br> 标签或者明确指定的换行符时才会换行）。
• pre-wrap：保留空白符序列，但是会正常换行。
• pre-line：合并空白符序列，但是正常换行（只有在遇到 <br>
pre: 공백 시퀀스를 유지하지만 정상적으로 래핑합니다(<br> 태그 또는 명시적으로 지정된 개행 문자가 발견되는 경우에만).

pre-wrap: 공백 순서를 유지하되 정상적으로 줄 바꿈합니다.

pre-line: 공백 시퀀스를 결합하지만 정상적으로 줄바꿈합니다(<br> 태그 또는 명시적으로 지정된 개행 문자가 있는 경우에만).

예:

<p style="white-space:nowrap;">这是一段不换行的文字</p>

3. 위 코드는 줄 바꿈 없이 텍스트를 표시할 수 있습니다.

요소에 포함된 텍스트를 줄 바꿈하지 않으려면 이 요소의 스타일에 공백:nowrap을 추가할 수 있습니다.

CSS의 text-overflow 속성을 사용하세요.
• CSS의 text-overflow 속성은 텍스트가 컨테이너를 오버플로할 때 수행해야 할 작업을 지정할 수 있습니다. 다음과 같은 공통 값을 갖습니다.
• clip: 텍스트를 자르고 오버플로 부분을 표시하지 않습니다.

줄임표: 오버플로 부분을 줄임표로 바꿉니다.

string: 오버플로 부분을 지정된 문자열로 바꿉니다.

예:

<p style="width:100px;overflow:hidden;text-overflow:ellipsis;">这是一段会溢出的文字，被省略号替代。</p>

위 코드는 텍스트의 컨테이너 너비를 100px로 설정하고, 넘친 부분을 줄임표로 대체하여 텍스트가 줄바꿈되지 않도록 합니다.

text-overflow 속성은 공백이 nowrap 또는 pre-wrap으로 설정된 경우에만 적용됩니다. 🎜🎜요약🎜🎜위의 세 가지 방법 모두 HTML에서 비선 줄 바꿈 표시를 달성할 수 있지만 표준을 준수하고 비선 줄 바꿈을 구현할 수 있을 뿐만 아니라 CSS의 공백 속성을 사용하는 것이 좋습니다. , 텍스트 줄 바꿈도 제어합니다. 또한 태그는 더 이상 사용되지 않으므로 사용을 피해야 합니다. 🎜

위 내용은 줄바꿈 없이 HTML 표시를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!