CSS 내용을 사용하여 HTML 엔터티 추가

CSS content 속성을 사용하여 HTML 엔터티를 어떻게 추가 합니까?

이와 같은 것을 사용  하면 비 공백 공간 대신 ​​화면에 인쇄 됩니다.

.breadcrumbs a:before {
    content: ' ';
}

이스케이프 된 유니 코드를 사용해야합니다.

처럼

.breadcrumbs a:before {
    content: '\0000a0';
}

자세한 정보 : http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

CSS는 HTML이 아닙니다. HTML에서  명명 된 문자 참조 입니다. 십진수 숫자 참조와 같습니다  . 160은 유니 코드 (또는 UCS-2 ; HTML 4.01 사양 참조)의 문자 의 십진 코드 포인트 입니다 . 해당 코드 포인트의 16 진 표현은 U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ )입니다. 유니 코드 코드 차트 와NO-BREAK SPACE 문자 데이터베이스 있습니다.

CSS에서는 문자 코드 포인트의 16 진수 값을 기반으로하는 문자에 유니 코드 이스케이프 시퀀스를 사용해야합니다. 그래서 당신은 작성해야합니다

.breadcrumbs a:before {
  content: '\a0';
}

이스케이프 시퀀스가 ​​문자열 값에서 마지막에 오는 한 작동합니다. 문자가 뒤 따르면 오해를 피하는 두 가지 방법이 있습니다.

a) (다른 사람들이 언급) 이스케이프 시퀀스에는 정확히 6 자리 16 진수를 사용하십시오.

.breadcrumbs a:before {
  content: '\0000a0foo';
}

b) 이스케이프 시퀀스 뒤에 공백 문자 (예 : 공백)를 추가하십시오.

.breadcrumbs a:before {
  content: '\a0 foo';
}

( f16 진 숫자 이므로 여기에서 \a0f의미 GURMUKHI LETTER EE하거나 적절한 글꼴이있는 경우 ਏ입니다.)

구분 공백은 무시되고  foo여기에 표시된 공백은 NO-BREAK SPACE문자가됩니다.

공백 접근 ( '\a0 foo')은 6 자리 접근 ( '\0000a0foo')에 비해 다음과 같은 장점이 있습니다 .

• 앞에 오는 0이 필요하지 않고 숫자를 세지 않아도되기 때문에 입력 하기가 더 쉽습니다 .
• 그것은 쉽게 읽을 수이스케이프 시퀀스와 다음 텍스트 사이에 공백이 있고 숫자를 세지 않아도되기 때문에 .
• 그것 더 적은 공간을 필요로 앞에 0이 필요하지 않기 때문에;
• 그것은이다 위쪽으로 호환 미래의 U + 10FFFF 넘어 유니 코드 지원 코드 포인트가 CSS 사양의 수정을 필요로하기 때문에.

따라서 이스케이프 문자 뒤에 공백을 표시하려면 스타일 시트에서 두 공백을 사용 하십시오.

.breadcrumbs a:before {
  content: '\a0  foo';
}

또는 명시 적으로 작성하십시오.

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

자세한 내용은 CSS 2.1, "4.1.3 문자 및 대소 문자"섹션 을 참조하십시오.

업데이트 : PointedEars는  모든 CSS 상황에서 올바른 스탠드
'\a0 '는 공간이 16 진수 문자열의 종결 자이며 이스케이프 된 시퀀스에 흡수된다는 것을 암시한다고 언급합니다. 그는 아래에서 설명하고 고친 문제에 대한 좋은 해결책처럼 들리는 이 권위있는 설명 을 지적했다 .

당신이해야 할 일은 이스케이프 된 유니 코드를 사용하는 것입니다. 당신이 말한 것에도 불구하고 CSS 내 \00a0에서 완벽한 스탠드 인은 아닙니다  . 그래서 시도하십시오 :

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

구체적 \0000a0으로 as를 사용 합니다  . mathieu와 millikin이 제안한대로 시도하면 :

content:'No\00a0Break'   /* becomes No਋reak */

B를 16 진수 이스케이프 문자로 가져갑니다. 0-9a-fA-F에서도 마찬가지입니다.

CSS에서는 HTML 엔터티 대신 유니 코드 이스케이프 시퀀스를 사용해야합니다. 이것은 문자의 16 진수 값을 기반으로합니다.

기호를 16 진수로 변환하는 가장 쉬운 방법은 ▾ ( ▾) \25BE에서 Microsoft calculator =)를 사용하는 것입니다.

예. 프로그래머 모드 활성화, 십진법 켜기, 입력9662 을 켜고을 한 다음 16 진수로 전환하면 얻을 수 25BE있습니다. 그런 다음 \시작 부분에 백 슬래시 를 추가하십시오 .

비 공백 공간에는 16 진 코드를 사용하십시오. 이 같은:

.breadcrumbs a:before {
    content: '>\00a0';
}

nbsp열린 CharMap 을 붙여 넣고 문자 160을 복사 하는 방법이 있습니다 . 그러나이 경우에는 다음과 같이 패딩으로 간격을 둡니다.

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

display:inline-block그러나 빵 부스러기 또는 무언가 를 설정해야 할 수도 있습니다 .

예를 들어 :

http://character-code.com/arrows-html-codes.php

예 : 캐릭터를 선택하려면 "& # 8620" "& # x21ac"를 선택했습니다 ( HEX 값 사용 )

.breadcrumbs a:before {
    content: '\0021ac';
}

결과 : ↬

그게 다야 :)

나는 이것이 꽤 오래된 게시물이라는 것을 알고 있지만 간격이 모두 끝난 후에는 왜 간단하지 않습니까?

.breadcrumbs a::before {
    content: '>';
    margin-left: 8px;
    margin-right: 8px;
}

나는이 방법을 전에 사용했다. 내 테스트에서 ">"를 사용하여 다른 줄에 완벽하게 줄 바꿈됩니다.

두 가지 방법이 있습니다.

• HTML에서 :

  <div class="ics">&#9969;</div>

이로 인해 result

• CSS에서 :

  .ics::before {content: "\9969;"}

HTML 코드로 <div class="ics"></div>

이로 인해 in