CSS를 통해 서식있는 텍스트로 표시 요소

Question

CSS를 통해 pre 요소의 표시를 에뮬레이션 할 수있는 방법이 있습니까?

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

<div class="preformatted"> 

    Please procure the following items: 

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

Answer 1

pre 요소의 공백 사전 형식화를 유지하려면 white-space: pre을 사용하십시오. 한 걸음 더 나아가려면 font-family: monospace을 추가하십시오. pre 요소는 기본적으로 (예 : 코드 블록과 함께) 고정 폭 글꼴로 설정됩니다.

Answer 2

예 :

div.preformatted { 
    white-space: pre; 
    } 

참조 :

• white-space.

Answer 3

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

.preformatted { 
 
    font-family: monospace; 
 
    white-space: pre; 
 
}

<div class="preformatted"> 
 

 
    Please procure the following items: 
 

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

나는 "사전 랩은"더 나은 생각합니다. 그것은 라인에서 긴 길이 도움이 될 수 있습니다.

Answer 4

inorder를 얻으려면 <pre>을 사용할 수 있습니다.

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