CSS li:before{ 内容:“■”;如何在电子邮件信纸中将此特殊字符编码为 Bullit?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5316545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:56:33  来源:igfitidea点击:

li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?

csslistcharacter-encodingspecial-characters

提问by Sam

After proudly coloring my liststyle bullet without any image url or span tags, via:

自豪地为我的 liststyle 项目符号着色后,没有任何图像 url 或 span 标签,通过:

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

Although these stylesheets work perfectly down to the rounded borders and other css3 stuff, and although the recipient of the email (for instance, Eudora OSE 1) renders all css styles correctly, just like in a browser, there is one problem: the bullets like ?or become converted into &#adabacadabra;

尽管这些样式表可以完美地处理圆角边框和其他 css3 内容,并且尽管电子邮件的收件人(例如,Eudora OSE 1)正确地呈现了所有 css 样式,就像在浏览器中一样,但存在一个问题:项目符号像?变成&#adabacadabra;

Appearing finally like so in emails:

最终在电子邮件中出现:

enter image description here

在此处输入图片说明

How do I proceed from here?

我如何从这里开始?

回答by Lea Verou

Never faced this problem before (not worked much on email, I avoid it like the plague) but you could try declaring the bullet with the unicode code point (different notation for CSS than for HTML): content: '\2022'. (you need to use the hex number, not the 8226 decimal one)

以前从未遇到过这个问题(在电子邮件上没有太大作用,我像瘟疫一样避免它)但是您可以尝试使用 unicode 代码点(CSS 与 HTML 的不同表示法)声明项目符号:content: '\2022'. (您需要使用十六进制数,而不是 8226 十进制数)

Then, in case you use something that picks up those characters and HTML-encodes them into entities (which won't work for CSS strings), I guess it will ignore that.

然后,如果您使用某些东西来提取这些字符并将它们 HTML 编码为实体(这不适用于 CSS 字符串),我想它会忽略这一点。

回答by amit trvedi

You ca try this:

你可以试试这个:

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: "";
}

It worked for me, thanks to this post.

由于这篇文章,它对我有用

回答by Tomalak

You are facing a double-encoding issue.

您正面临双重编码问题。

and •are absolutely equivalent to each other. Both refer to the Unicode character 'BULLET' (U+2022)and can exist side-by-side in HTML source code.

并且•彼此绝对等效。两者都是指Unicode 字符“BULLET”(U+2022),并且可以在 HTML 源代码中并排存在。

However, if that source-code is HTML-encoded againat some point, it will contain and •. The former is rendered unchanged, the latter will come out as "•" on the screen.

但是,如果该源代码在某个时候再次进行HTML 编码,它将包含•。前者保持不变,后者将显示为“•” 屏幕上。

This is correct behavior under these circumstances. You need to find the point where the superfluous second HTML-encoding occurs and get rid of it.

在这些情况下,这是正确的行为。您需要找到多余的第二个 HTML 编码发生的点并摆脱它。

回答by Larry K

Lea's converter is no longer available. I just used this converter

Lea 的转换器不再可用。我刚用过这个转换器

Steps:

脚步:

  1. Enter the Unicode decimal version such as 8226 in the tool's green input field.
  2. Press Dec code points
  3. See the result in the box Unicode U+hex notation(eg U+2022)
  4. Use it in your CSS. Eg content: '\2022'
  1. 在工具的绿色输入字段中输入 Unicode 十进制版本,例如 8226。
  2. Dec code points
  3. 查看框中的结果Unicode U+hex notation(例如 U+2022)
  4. 在你的 CSS 中使用它。例如content: '\2022'

ps. I have no connection with the web site.

附:我与该网站没有任何关系。

回答by DoubleA

You shouldn't use LIs in email. They are unpredictable across email clients. Instead you have to code each bullet point like this:

您不应该在电子邮件中使用 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>

This will ensure that your bullets work in every email client.

这将确保您的项目符号在每个电子邮件客户端中都能正常工作。

回答by Bikram Shrestha

This website could be helpful,

这个网站可能会有所帮助,

http://character-code.com

here you can copy it and put directly on css html

在这里你可以复制它并直接放在css html上