줄이 끊어지지 않을 때

텍스트가 상위 용기 가장자리에 도달하면 일반적으로 줄이 끊어집니다. 이것은 표준 단락 동작입니다. 그러나 이것은 단어 사이의 공간이나 공백에 의존합니다. CSS는 라인 브레이크에 영향을 미치는 몇 가지 속성을 제공하지만 예상 중단이 실패하는 시나리오에 중점을 두겠습니다.

브라우저에 명확한 브레이크 표시기가 없으면 어떻게됩니까?

"태그 목록"예제를 작성한 다음 라인 차단 문제를 해결해 봅시다. 초기 HTML은 다음과 같습니다.

• PHP
• 자바 스크립트
• 녹

CSS를 사용하여 수평으로 목록 항목을 정렬하겠습니다.

 ul {
  여백 : 0;
  패딩 : 0;
  목록 스타일 : 없음;
}

Li {
  디스플레이 : 인라인;
  패딩-오른쪽 : 5px;
}

목록은 원하는대로 나타납니다. 이제 고정 너비로 ​​목록을 div 로 랩핑합시다.

<div class="tags">
  <ul>
    <li>PHP</li>
    <li>자바 스크립트</li>
    <li>녹</li>
  </ul>
</div>

.tags {
  너비 : 200px;
}

문제는 다음과 같습니다. HTML Minification은 공백을 제거하여 다음과 같습니다.

<div><ul>
<li> PHP</li>
<li> 자바 스크립트</li>
<li> 녹</li>
</ul></div>

라인은 더 이상 200px에서 파손되지 않습니다. 왜? 브라우저는 문자 분리가 없기 때문에 전체 목록을 단일의 끊임없는 단어로 취급합니다. 패딩은 이것을 해결하지 않습니다. 전체 목록은 단일 엔티티로 남아 있습니다.

강제 라인은 특수 문자로 끊어집니다

공간 (비 파괴 공간 제외) 외에도 여러 문자가 줄이 트리거됩니다.

• 하이픈 (-)
• en dashes ( -)
• Em Dashes ( -)
• 물음표 (?)
• 제로 폭 공간 (U 200b 또는)

이러한 휴식은 렌더링 중에 발생합니다. 브라우저는 여전히 처음에는 텍스트를 단일 장치로 본다. 이 캐릭터 중 하나가있는 목록 항목을 추가하면 휴식이 발생합니다. "Objective-C"를 추가합시다 :

<div>
  <ul>
    <li>PHP</li>
    <li>자바 스크립트</li>
    <li>녹</li>
    <li>대상 c</li>
  </ul>
</div>

다음은 세 가지 솔루션입니다.

솔루션 1 : 라인 브레이크 캐릭터를 통합합니다

수동으로 공백 또는 기타 라인 브레이크 캐릭터를 추가합니다. 그러나 미니 퍼가이를 제거 할 수 있습니다.

<div>
  <ul>
    <li>PHP</li>
    <li>자바 스크립트</li>
    <li>녹</li>
    <li>대상 c</li>
  </ul>
</div>

솔루션 2 : 의사 요소를 활용합니다

css ::before and ::after pseudo elements를 사용하여 라인을 깨뜨리는 문자를 추가하십시오. 미니 파이어는이 CSS에 대한 공백을 제거하지 않습니다. 공백 붕괴는이 접근법에 영향을 줄 수 있습니다. white-space: pre; 필요할 수 있습니다.

해결책 3 : inline-block 사용하십시오

display: inline-block; 목록에 항목은 제로 폭 공간과 유사하지만 시각적 분리는없는 힘이 끊어집니다.

솔루션 4 : Flexbox를 활용합니다

display: flex; 또는 display: inline-flex; 에<ul></ul> 유연한 라인 포장을 허용합니다.

이 문제는 덜 일반적이지만, 특히 공백을 수정하는 미니 플라이어 나 빌드 프로세스를 사용할 때는이 문제를 알고 있으며 솔루션은 가치가 있습니다. 많은 현대적인 도구 가이 문제를 완화하지만 근본적인 원인을 이해하는 것이 여전히 중요합니다.

위 내용은 줄이 끊어지지 않을 때의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!