Nice programing

li : before {content : "■";

nicepro 2020. 11. 23. 20:01
반응형

li : before {content : "■"; }이 특수 문자를 이메일 편지지에서 Bullit으로 인코딩하는 방법은 무엇입니까?


이미지 URL 또는 스팬 태그없이 내 목록 스타일 글 머리 기호를 자랑스럽게 채색 한 후 다음을 통해

ul{ list-style: none; padding:0;  margin:0;  }
li{ padding-left: 1em; text-indent: -1em;    }
li:before { content: "■"; padding-right:7px; }

이러한 스타일 시트는 둥근 테두리 및 기타 css3 항목까지 완벽하게 작동하고 이메일 수신자 (예 : Eudora OSE 1)가 브라우저에서와 같이 모든 CSS 스타일을 올바르게 렌더링하지만 한 가지 문제가 있습니다. 또는 변환에 될&#adabacadabra;

마침내 이메일에 이렇게 나타납니다.

여기에 이미지 설명 입력

여기에서 어떻게 진행합니까?


이전에는이 ​​문제에 직면 한 적이 없었지만 (이메일에서 많이 작업하지 않았고, 전염병처럼 피했습니다) 유니 코드 코드 포인트 (HTML보다 CSS에 대한 다른 표기법)로 총알을 선언 할 수 content: '\2022'있습니다.. (십진수 8226이 아닌 16 진수를 사용해야합니다)

그런 다음 해당 문자를 선택하고이를 엔티티로 HTML 인코딩 (CSS 문자열에서는 작동하지 않음)하는 것을 사용하는 경우 무시할 것입니다.


당신은 이것을 시도합니다 :

ul { list-style: none;}

li { position: relative;}

li:before {
    position: absolute;  
    top: 8px;  
    margin: 8px 0 0 -12px;    
    vertical-align: middle;
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #ccc;
    content: "";
}

게시물 덕분에 저에게 효과적 이었습니다.


이중 인코딩 문제가 있습니다.

•서로에 대해 완전히 동등하다. 둘 다 유니 코드 문자 'BULLET'(U + 2022)를 나타내며 HTML 소스 코드에 나란히 존재할 수 있습니다.

그러나 해당 소스 코드가 어느 시점에서 다시 HTML로 인코딩 되면 •. 전자는 변경되지 않고 후자는 "& # 8226;"으로 표시됩니다. 화면에.

이는 이러한 상황에서 올바른 동작입니다. 불필요한 두 번째 HTML 인코딩이 발생하는 지점을 찾아서 제거해야합니다.


Lea의 변환기는 더 이상 사용할 수 없습니다. 방금이 변환기를 사용했습니다.

단계 :

  1. 도구의 녹색 입력 필드에 8226과 같은 유니 코드 십진수 버전을 입력합니다.
  2. 프레스 Dec code points
  3. 상자에서 결과 확인 Unicode U+hex notation(예 : U + 2022)
  4. CSS에서 사용하십시오. content: '\2022'

추신. 나는 웹 사이트와 아무런 관련이 없습니다.


이메일에 LI를 사용하면 안됩니다. 이메일 클라이언트에서 예측할 수 없습니다. 대신 다음과 같이 각 글 머리 기호를 코딩해야합니다.

<table width="100%" cellspacing="0" border="0" cellpadding="0">
    <tr>
        <td align="left" valign="top" width="10" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">&bull;</td>
        <td align="left" valign="top" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">This is the first bullet point</td>
    </tr>
    <tr>
        <td align="left" valign="top" width="10" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">&bull;</td>
        <td align="left" valign="top" style="font-family:Arial, Helvetica, Sans-Serif; font-size:12px;">This is the second bullet point</td>
    </tr>
</table>

이렇게하면 모든 이메일 클라이언트에서 글 머리 기호가 작동합니다.


이 웹 사이트가 도움이 될 수 있습니다.

http://character-code.com

여기에서 복사하여 CSS HTML에 직접 넣을 수 있습니다.

참고 URL : https://stackoverflow.com/questions/5316545/libefore-content-how-to-encode-this-special-character-as-a-bullit-in-a

반응형