developer tip

CSS를 통해 미리 서식이 지정된 텍스트로 요소 표시

copycodes 2020. 8. 20. 19:00
반응형

CSS를 통해 미리 서식이 지정된 텍스트로 요소 표시


preCSS를 통해 요소 표시를 에뮬레이트하는 방법이 있습니까?

예를 들어 CSS 규칙을 사용하여이 div에서 공백을 그대로 유지할 수 있습니까?

<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>

요소 white-space: pre에서와 같이 공백 사전 서식을 유지하는 데 사용 합니다 pre. 단계 더도 추가 이동하려면 font-family: monospace같은 pre요소는 일반적으로 기본적으로 고정 폭 글꼴로 설정되어 있습니다 (예 : 코드 블록에 사용).

.preformatted {
    font-family: monospace;
    white-space: pre;
}
<div class="preformatted">

  Please procure the following items:

    - Soup
    - Jam
    - Hyphens 
    - Cantaloupe
</div>


.preformatted {
   white-space: pre-wrap;
}

"사전 포장"이 더 낫다고 생각합니다. 긴 길이의 줄에 도움이 될 수 있습니다.


예:

div.preformatted {
    white-space: pre;
    }

참고:


중위 얻기 위해 <pre>당신이 사용할 수 있습니다;

div.preformatted{ white-space: pre ; display: block; }

참고 URL : https://stackoverflow.com/questions/9753597/display-element-as-preformatted-text-via-css

반응형