Có các mã khoảng trắng khác như & nbsp cho nửa không gian, không gian em, không gian en vv hữu ích trong HTML không?


149

Tự hỏi nếu có các mã khác có sẵn để sử dụng trong một bản tin HTML.

Tôi sẽ sử dụng phần đệm hoặc lề của ô nhưng tôi chưa quen với điều HTML / CSS này và tôi không thể tìm thấy một thay đổi nào có hiệu lực cả dòng Tiêu đề chính và tiêu đề phụ bên dưới nó. Trở thành một email Tôi ngần ngại tìm hiểu về CSS để có được nó - vì tôi không biết khách hàng email nào không thích cách CSS thay vì đánh dấu nội tuyến.

Đối với ngữ cảnh, mẫu tôi đang sử dụng là chủ đề Tắt tiếng từ snip Mailchimp:

    <!-- language: lang-html -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="626">
    <tbody>
        <tr>
            <td valign="middle" bgcolor="#546781" height="97" background="images/header-bg.jpg" style="vertical-align: middle;">
                <table cellspacing="0" cellpadding="0" border="0" align="center" width="555" height="97">
                    <tbody>
                        <tr>
                            <td valign="middle" width="160" style="vertical-align:middle; text-align: left;">
                                <img width="70" height="70" src="http://dl.dropbox.com/…….png" style="margin:0; margin-top: 4px; display: block;" alt="" />
                            </td>
                            <td valign="middle" style="vertical-align: middle; text-align: left;">
                                <h1 class="title" style="margin:0; padding:0; font-size:30px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Title of Report</span></singleline>
                                </h1>
                                <h1 class="title" style="margin:0; padding:0; font-size:15px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Small Subhead</span></singleline>
                                </h1>
                            </td>
                            <td width="55" valign="middle" style="vertical-align:middle; text-align: center;">
                                <h2 class="date" style="margin:0; padding:0; font-size:13px; font-weight: normal; color: #192c45 !important; text-transform: uppercase; font-weight: bold; line-height:1;">
                                    <currentmonthname />December
                                </h2>
                                <h2 class="date" style="margin:0; padding:0; font-size:23px; font-weight: normal; color: #192c45 !important; font-weight: bold;">
                                     <currentyear />2011
                                </h2>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

Toàn bộ email dưới dạng một trang web có thể được nhìn thấy ở đây

Câu trả lời:


381

Vâng, nhiều .

Bao gồm nhưng không giới hạn trong:

  • không phá vỡ không gian: &#160;hoặc&nbsp;
  • không gian hẹp không giới hạn: &#8239;(không có tham chiếu ký tự)
  • vi không gian: &#8194;hoặc&ensp;
  • không gian em: &#8195;hoặc&emsp;
  • Không gian 3 mỗi em: &#8196;hoặc&emsp13;
  • 4-per-em không gian: &#8197;hoặc&emsp14;
  • Không gian 6 người: &#8198; (không có tham chiếu ký tự)
  • không gian hình: &#8199;hoặc&numsp;
  • dấu chấm câu: &#8200; hoặc&puncsp;
  • không gian mỏng: &#8201;  hoặc&thinsp;
  • không gian tóc: &#8202; hoặc&hairsp;

span{background-color: red;}
<table>
<tr><td>non breaking space:</td><td> <span>&#160;</span> or <span>&nbsp;</span></td></tr>
<tr><td>narrow no-break space:</td><td> <span>&#8239;</span></td></tr>
<tr><td>en space:</td><td> <span>&#8194;</span> or <span>&ensp;</span></td></tr>
<tr><td>em space:</td><td> <span>&#8195;</span> or <span>&emsp;</span></td></tr>
<tr><td>3-per-em space:</td><td> <span>&#8196;</span> or <span>&emsp13;</span></td></tr>
<tr><td>4-per-em space:</td><td> <span>&#8197;</span> or <span>&emsp14;</span></td></tr>
<tr><td>6-per-em space:</td><td> <span>&#8198;</span></td></tr>
<tr><td>figure space:</td><td> <span>&#8199;</span> or <span>&numsp;</span></td></tr>
<tr><td>punctuation space:</td><td> <span>&#8200;</span> or <span>&puncsp;</td></tr>
<tr><td>thin space:</td><td> <span>&#8201;</span> or <span>&thinsp;</span></td></tr>
<tr><td>hair space:</td><td> <span>&#8202;</span> or <span>&hairsp;</span></td></tr>
</table>


3
Firefox biểu hiện tất cả các không gian trên là cùng một chiều rộng, rộng hơn một khoảng trắng trong phông chữ, ngoại trừ for nbsp, trong đó nó hiển thị dưới dạng một khoảng trắng và áp đặt ký tự không phá vỡ. Một sự xấu hổ thực sự. Có những trường hợp chỉ có một nhân vật sẽ làm, ví dụ như khi phần đệm được điều khiển hoặc chuyển sang một thứ khác với các cấu trúc nhưbefore:
fyngyrz

2
@fyngyrz Ít nhất là trong Firefox 54 trên Linux, điều này không đúng (nữa). Nó cũng có thể phụ thuộc vào phông chữ mặc dù; Tôi đã thử nghiệm điều này trên Stack Overflow, nơi họ phông chữ Arial được sử dụng.
Chỉ là một học sinh

5
Đối với bất kỳ ai chỉ muốn xem các loại khoảng trắng này trông như thế nào jsfiddle.net/LcLg5u25
Vadim Ovchinnikov

2
không gian hình $numsp;rất hữu ích cho việc căn chỉnh các số, bởi vì không gian được xác định là chính xác rộng bằng một số trong cùng một phông chữ.
Rudey

2
Firefox trên Windows hiện đã ổn (v.61) BTW.
MSC

13

Có các mã cho các ký tự không gian khác và các mã như vậy hoạt động tốt, nhưng bản thân các ký tự là ký tự kế thừa. Chúng chỉ được đưa vào các bộ ký tự do sự hiện diện của chúng trong dữ liệu ký tự hiện có, thay vì sử dụng trong các tài liệu mới. Đối với một số kết hợp phông chữ và phiên bản trình duyệt, chúng có thể khiến glyph chung của ký tự không thể hiện được hiển thị. Để biết chi tiết, hãy kiểm tra trang của tôi về không gian Unicode .

Vì vậy, sử dụng CSS sẽ an toàn hơn và cho phép bạn chỉ định bất kỳ khoảng cách mong muốn nào, không chỉ độ rộng cụ thể của không gian có chiều rộng cố định. Nếu bạn chỉ muốn thêm khoảng cách xung quanh các phần tử h2 của mình, thì dường như đối với tôi, sau đó đặt phần đệm trên các phần tử đó (thay đổi giá trị của phần đệm: 0 cài đặt mà bạn đã có) sẽ hoạt động tốt.


Cảm ơn tôi đã kết thúc bằng cách sử dụng thuộc tính nội tuyến <h1 class = "title" style = "lề: 0; lề-trái: 2px; padding: 0; font-size: 15px; font-weight: normal; color: # 192c45! ; "> Tôi đoán đó là an toàn nhất mặc dù họ phông chữ là Helvetica Neue, v.v.
wide_eyed_pupil

Nhưng nếu chúng là di sản và 'được bao gồm trong các bộ ký tự chỉ do sự hiện diện của chúng trong dữ liệu ký tự hiện có', điều đó có nghĩa là chúng sẽ không biến mất bất cứ lúc nào sớm. Tôi không thực sự thấy bạn tranh luận. Tôi cho rằng bất kỳ ai 'tiên tiến' đủ để tìm kiếm 'một nửa không gian' có lẽ đã quyết định rằng lề hoặc phần đệm không phù hợp. Tôi giải quyết theo (&thinsp;4 PACK&thinsp;)yêu cầu của mình - sử dụng lề hoặc phần đệm sẽ là một ý tưởng tồi tệ cho việc này
Simon_Weaver

1
@Simon_Weaver, như tôi mô tả, các ký tự không gian có chiều rộng cố định không hoạt động đáng tin cậy. Chúng cũng là một công cụ cùn: một tập hợp chiều rộng cố định, mặc dù chiều rộng thực tế phụ thuộc vào phông chữ, ngược lại với các cài đặt độc lập với phông chữ như <span style="padding: 0 0.1em">4 PACK</span>, với sự tự do trong việc thiết lập và điều chỉnh các giá trị.
Jukka K. Korpela

1
Mặc dù nó khá cũ, "Rắc rối với EM 'n EN (và các nhân vật mờ ám khác ) của Peter K Sheerin" ( alistapart.com/article/emen ) vẫn hữu ích khi đọc về chủ đề này. Đặc biệt, mặc dù điều này có thể đã được cải thiện trong 14 năm qua, nhưng thực tế là không phải tất cả các kiểu chữ fo̶n̶t̶s̶ đều thể hiện chính xác các không gian khác nhau.
Dave Land

1
Ngoài ra còn có ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htmZERO WIDTH NON JOINERtôi có xu hướng sử dụng thường xuyên hơn không gian có độ rộng bằng không.
Reb.Cabin

9

Không chắc đây có phải là những gì bạn đang đề cập đến không, nhưng đây là danh sách các thực thể HTML bạn có thể sử dụng:

Danh sách các tham chiếu thực thể ký tự XML và HTML

Sử dụng nội dung trong cột 'Tên', bạn có thể chỉ cần bọc chúng trong một &;

Ví dụ &nbsp;, &emsp;vv


Vì vậy, trong bối cảnh văn bản được đánh dấu (nói bên trong '<p>' và '</ p>', '&' biểu thị một tên glyph unicode, phải không? ' Nó được phân tích bởi trình duyệt?
wide_eyed_pupil

Dấu chấm phẩy đóng là tùy chọn theo nghĩa vì trình phân tích cú pháp HTML vẫn sẽ xem khoảng trắng là phần cuối của tham chiếu. Tuy nhiên, thông số kỹ thuật nói rằng bạn "phải" kết thúc bằng dấu chấm phẩy ( w3.org/TR/html5/syntax.html#character-references )
isNaN1247

Tái bút - Tôi vẫn sẽ đánh giá cao nếu bạn đánh dấu đây là câu trả lời - nếu bạn cảm thấy điều này đã trả lời câu hỏi của bạn :)
isNaN1247

2

Tôi đã sử dụng Mã thập phân Unicode này &#8204;và làm việc. biết thêm chi tiết


1
Người không tham gia chiều rộng bằng không (mà bạn đã liên kết) không phải là ký tự khoảng trắng. Nó không chiếm bất kỳ khoảng trống nào và không được coi là một dấu tách từ. Mục đích duy nhất của nó là ngăn các ký tự liền kề không được nối vào một chữ ghép, đôi khi rất hữu ích trong các tập lệnh phi Latinh.
duskwuff -inactive-

1

Những gì về nhân vật không gian được mã hóa bình thường?

&#32;
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.