มีรหัสช่องว่างอื่น ๆ เช่น & nbsp สำหรับ half-space, em-spaces, en-space ฯลฯ มีประโยชน์ใน HTML หรือไม่

149

สงสัยว่ามีรหัสอื่น ๆ ให้ใช้ในจดหมายข่าว HTML หรือไม่

ฉันจะใช้การขยายเซลล์หรือระยะขอบ แต่ฉันใหม่สำหรับสิ่ง HTML / CSS นี้และฉันไม่สามารถหาการเปลี่ยนแปลงที่มีผลต่อทั้งหัวข้อหลักและหัวเรื่องย่อยภายใต้ การเป็นอีเมลฉันลังเลที่จะเข้าไปยุ่งกับ CSS เพื่อรับมัน - เพราะฉันไม่รู้ว่าไคลเอ็นต์อีเมลใดที่ไม่ชอบในแบบของ CSS แทนที่จะเป็นแบบอินไลน์มาร์กอัป

สำหรับบริบทเทมเพลตที่ฉันใช้คือปิดเสียงธีมจาก Mailchimp snip:

    <!-- 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>

สามารถดูอีเมลทั้งหมดเป็นหน้าเว็บได้ที่นี่

html

— wide_eyed_pupil
แหล่งที่มา

381

ใช่แล้วหลายๆ

รวมถึง แต่ไม่ จำกัด เฉพาะ:

ไม่ทำลายพื้นที่:  หรือ 
พื้นที่ว่างแบบไม่ จำกัด :  (ไม่มีการอ้างอิงอักขระ)
en space:  หรือ&ensp;
พื้นที่ em:  หรือ&emsp;
3-per-em space:  หรือ&emsp13;
4-per-em space:  หรือ&emsp14;
6-per-em space:  (ไม่มีการอ้างอิงอักขระ)
พื้นที่รูป:  หรือ&numsp;
พื้นที่เครื่องหมายวรรคตอน:   หรือ&puncsp;
พื้นที่บาง:   หรือ 
พื้นที่ผม:   หรือ&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>

ขยายตัวอย่างข้อมูล

— bookcasey
แหล่งที่มา

3

Firefox แสดงช่องว่างด้านบนทั้งหมดตามความกว้างเท่ากันกว้างกว่าหนึ่งช่องว่างในแบบอักษรยกเว้น for nbsp โดยจะแสดงเป็นช่องว่างหนึ่งช่องและกำหนดอักขระที่ไม่แตกหัก ความอัปยศที่แท้จริง มีหลายกรณีที่จะมีเพียงตัวละครเท่านั้นที่จะทำเช่นเมื่อการbefore:

— แพ็ดดิ้ง

2

@fyngyrz อย่างน้อยใน Firefox 54 บน Linux นี่ไม่เป็นความจริง (อีกต่อไป) มันอาจยังขึ้นอยู่กับตัวอักษรว่า; ฉันได้ทดสอบสิ่งนี้ใน Stack Overflow ที่ซึ่งใช้ตระกูลแบบอักษร Arial

— เพียงนักเรียน

5

สำหรับใครก็ตามที่ต้องการดูว่าช่องว่างประเภทนี้มีลักษณะอย่างไรjsfiddle.net/LcLg5u25

— Vadim Ovchinnikov

2

พื้นที่รูป$numsp;มีประโยชน์อย่างมากสำหรับการจัดตำแหน่งตัวเลขเนื่องจากพื้นที่ถูกกำหนดให้มีความกว้างเท่ากับตัวเลขในแบบอักษรเดียวกัน

— Rudey

2

Firefox บน Windows ใช้ได้แล้ว (v.61) BTW

— MSC

13

มีรหัสสำหรับอักขระช่องว่างอื่น ๆ และรหัสเช่นนั้นทำงานได้ดี แต่อักขระนั้นเป็นอักขระดั้งเดิม พวกเขารวมอยู่ในชุดอักขระเนื่องจากมีอยู่ในข้อมูลอักขระที่มีอยู่แทนที่จะใช้ในเอกสารใหม่ สำหรับชุดแบบอักษรและเบราว์เซอร์บางชุดอาจทำให้รูปแบบอักขระทั่วไปที่ไม่สามารถแสดงได้ สำหรับรายละเอียดการตรวจสอบของฉันหน้าเกี่ยวกับช่องว่าง Unicode

ดังนั้นการใช้ CSS นั้นปลอดภัยกว่าและช่วยให้คุณสามารถระบุระยะห่างตามจำนวนที่ต้องการไม่ใช่เฉพาะความกว้างเฉพาะของช่องว่างความกว้างคงที่ หากคุณเพียงแค่ต้องการเพิ่มระยะห่างรอบองค์ประกอบ h2 ของคุณตามที่ฉันเห็นจากนั้นตั้งค่าการเติมเต็มในองค์ประกอบเหล่านั้น (การเปลี่ยนค่าของการขยาย: 0 การตั้งค่าที่คุณมีอยู่แล้ว) จะทำงานได้ดี

— Jukka K. Korpela
แหล่งที่มา

ขอบคุณฉันลงเอยด้วยการใช้แอตทริบิวต์ inline <h1 class = "title" style = "margin: 0; margin-left: 2px; padding: 0; font-size: 15px; font-weight: Normal; color: # 192c45! ; "> ฉันคิดว่ามันปลอดภัยที่สุดแม้ว่าตระกูลฟอนต์คือ Helvetica Neue และอื่น ๆ

— wide_eyed_pupil

แต่หากพวกเขาเป็นมรดกและ 'รวมอยู่ในชุดตัวละครเท่านั้นเนื่องจากการปรากฏตัวของพวกเขาในข้อมูลตัวละครที่มีอยู่' ซึ่งหมายความว่าพวกเขาจะไม่หายไปทุกเวลาเร็ว ๆ นี้ ฉันไม่เห็นคุณโต้แย้ง ฉันคิดว่าทุกคน 'ขั้นสูง' พอที่จะมองหา 'ช่องว่างครึ่งหนึ่ง' ได้อาจตัดสินใจแล้วว่าระยะขอบหรือการขยายไม่เหมาะสม ฉันตัดสิน( 4 PACK )ตามความต้องการของฉัน - การใช้มาร์จิ้นหรือช่องว่างภายในจะเป็นความคิดที่แย่มากสำหรับเรื่องนี้

— Simon_Weaver

1

@Simon_Weaver ตามที่ฉันอธิบายตัวอักษรเว้นวรรคความกว้างคงที่ไม่สามารถทำงานได้อย่างน่าเชื่อถือ อีกทั้งยังเป็นเครื่องมือที่ไม่มีคม: ชุดความกว้างคงที่แม้ว่าความกว้างจริงจะขึ้นอยู่กับแบบอักษรซึ่งตรงกันข้ามกับการตั้งค่าแบบอักษรที่ไม่ขึ้นกับตัวอักษรเช่น<span style="padding: 0 0.1em">4 PACK</span>มีอิสระในการตั้งค่าและการปรับค่า

— Jukka K. Korpela

1

ถึงแม้ว่ามันจะค่อนข้างเก่าก็ตาม แต่ปีเตอร์เคเชียร์ดินของ "The Trouble With EM 'n EN (และตัวละครที่ร่มรื่นอื่น ๆ )" ( alistapart.com/article/emen ) ยังคงมีประโยชน์สำหรับการอ่านในหัวข้อนี้ โดยเฉพาะอย่างยิ่ง - แม้ว่าสิ่งนี้อาจมีการปรับปรุงในช่วง 14 ปีที่ผ่านมา - ความจริงที่ว่ารูปแบบตัวอักษรf̶o̶n̶t̶s̶ที่ไม่ทั้งหมดแสดงพื้นที่ที่ถูกต้อง

— เดฟแลนด์

1

นอกจากนี้ยังมีZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htmและZERO WIDTH NON JOINERฉันมักจะใช้บ่อยกว่าช่องว่างที่มีความกว้างเป็นศูนย์

— Reb.Cabin

9

ไม่แน่ใจว่านี่คือสิ่งที่คุณอ้างถึง แต่นี่คือรายการเอนทิตี HTML ที่คุณสามารถใช้ได้:

รายการอ้างอิงเอนทิตีอักขระ XML และ HTML

การใช้เนื้อหาภายในคอลัมน์ 'ชื่อ' คุณสามารถห่อสิ่งเหล่านี้ใน&และ;

เช่น  , &emsp;ฯลฯ

— isNaN1247
แหล่งที่มา

ดังนั้นในบริบทของการทำเครื่องหมายข้อความ (พูดใน '<p>' และ '</p>' the '&' หมายถึงชื่อสัญลักษณ์ยูนิโค้ดใช่, อะไรคือ ';' สำหรับตัวอักษรอวกาศไม่ได้ส่งสัญญาณเมื่อ เบราว์เซอร์แยกวิเคราะห์หรือไม่

— wide_eyed_pupil

เซมิโคลอนปิดเป็นทางเลือกในแง่ที่ตัวแยกวิเคราะห์ HTML จะยังคงเห็นช่องว่างเป็นจุดสิ้นสุดของการอ้างอิง อย่างไรก็ตามสเปคระบุว่าคุณ "ต้อง" ลงท้ายด้วยเซมิโคลอน ( w3.org/TR/html5/syntax.html#character-references )

— isNaN1247

ป.ล. - ฉันจะยังคงขอบคุณถ้าคุณทำเครื่องหมายว่านี่เป็นคำตอบ - ถ้าคุณรู้สึกว่านี่ตอบคำถามของคุณ :)

— isNaN1247

2

ฉันใช้รหัสเลขฐานสิบ Unicode นี้‌และทำงานได้ รายละเอียดเพิ่มเติม

— Ali Nassajpour
แหล่งที่มา

1

ไม่ใช่ผู้เข้าร่วมความกว้างศูนย์ (ซึ่งคุณเชื่อมโยง) ไม่ใช่อักขระเว้นวรรค ไม่ใช้พื้นที่และไม่ถือว่าเป็นตัวคั่นคำ มีวัตถุประสงค์เพียงอย่างเดียวคือการป้องกันไม่ให้อักขระที่อยู่ติดกันรวมเข้าด้วยกันซึ่งบางครั้งมีประโยชน์ในสคริปต์ที่ไม่ใช่ภาษาละติน

— duskwuff -inactive-

1

ตัวอักษร white-space ธรรมดาที่เข้ารหัสแล้วล่ะ

&#32;

— HelpNeeder
แหล่งที่มา