HTML 스팬 태그를 자동으로 래핑하는 방법은 무엇입니까? HTML 스팬 태그 사용법 소개

이 글에서는 HTML 스팬 태그가 자동으로 줄 바꿈하는 방법을 주로 설명하고 스팬의 7가지 속성에 대한 사용 및 소개를 소개합니다. 다음으로 이 글을 함께 살펴보겠습니다

먼저 스팬 태그를 자동으로 래핑하는 방법을 소개하겠습니다. 먼저 이 예제를 살펴보겠습니다.

<span style="width:80%;word-break:normal;display:block;white-space:pre-wrap;overflow:hidden;color:#0066CC;">这是随便可以
输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；这是随便可以
输入的内容；这是随便可以输入的内容；这是随便可以输入的内容；</span>

HTML 스팬 태그 예제 설명:

white-space: HTML 문서의 소스 코드 레이아웃을 통해 페이지에 표시되는 텍스트의 레이아웃을 제어합니다.

값: 일반 | pre-wrap | pre-line |

• pre : HTML 소스의 공백과 줄 바꿈을 유지합니다. 코드, pre 태그와 동일

• nowrap: br 줄 줄 바꿈 태그가 발견되지 않는 한 텍스트를 한 줄에 강제로 표시합니다.

• pre-wrap: pre 속성과 동일하지만 자동으로 줄 바꿈됩니다. 컨테이너 범위를 초과하는 경우

• pre-line: pre 속성과 동일하지만 연속된 공백을 만나면 공백
을 만들어 위 코드가 어떻게 표시되는지 확인하세요. 브라우저:

그림에 표시된 것처럼 위 그림에 표시된 텍스트는 페이지의 80%만 차지합니다. 이 설정을 사용하면 자동으로 줄 바꿈됩니다.

HTML 스팬 태그의 예를 다시 살펴보겠습니다.

<p>
<span>这只是普通文本</span>
这也是普通文本</p>

span에 스타일이 적용되지 않으면 스팬 요소의 텍스트는 시각적인 차이가 없습니다. 다른 텍스트. 그러나 위 예의 범위 요소는 p 요소에 추가 구조를 추가합니다.

<p class="tip"><span>提示：</span>这里是PHP文本</p>

p.tip span {
font-weight:bold;
color:#ff9955;
}