การเพิ่มเอนทิตี HTML โดยใช้เนื้อหา CSS

1013

คุณจะใช้คุณสมบัติCSS contentเพื่อเพิ่มเอนทิตีHTML ได้อย่างไร

การใช้บางสิ่งเช่นนี้เพียงพิมพ์ ไปที่หน้าจอแทนที่จะเป็นพื้นที่ไม่แตกหัก:

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

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

5

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

— questzen

95

มันขึ้นอยู่กับ. ในกรณีนี้มันมีวัตถุประสงค์เพื่อนำเสนอ มันจะ "ละเมิด" SoC ใส่ ">" ใน html

— mathieu

2

แค่คำถามคุณคิดว่ามันจะดีกว่าเป็นรายการสั่งซื้อ? ฉันหมายถึงมันเป็นรายการที่มีคำสั่งซื้อใช่ไหม

— alex

3

@questzen - ฉันคิดว่าเป็นที่ยอมรับได้อย่างสมบูรณ์ (และแบบฟอร์มที่ดี) เพื่อใช้ CSS :afterเพื่อตั้งค่าเช่นตัวบ่งชี้การเรียงลำดับ asc / desc ในคอลัมน์ที่เรียงลำดับ

— Josh M.

9

ฉันสังเกตว่าผู้คนคลั่งไคล้ในหลักการของ SoC สวรรค์เนื้อหาประเภทใดที่เป็นเครื่องหมาย ">" สำหรับคุณ! มีความเมตตา! มันเป็นแค่ไอคอนในบริบทนี้วิดเจ็ตกระสุนคุณตั้งชื่อมัน สำหรับฉันแล้วเนื้อหาเป็นสิ่งที่ฉันต้องการค้นหา

— user776686

1063

คุณต้องใช้ Unicode ที่หลบหนี:

ชอบ

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

ข้อมูลเพิ่มเติมเกี่ยวกับ: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

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

57

zeroes ชั้นนำฟุ่มเฟือยดูCSS 2.1: 4.3.7 Strings '>\a0'พอเพียง

— SharpEars

18

@dlamblin ยิ่งไปกว่านั้นเพื่อหลีกเลี่ยงตัวละครที่ถูกตีความว่าเป็นส่วนหนึ่งของลำดับการหลบหนีได้อย่างน่าเชื่อถือให้เพิ่มพื้นที่สีขาวมาตรฐาน: '>\a0 bc'จะปรากฏ> bcขึ้น

— แหลมปลาย

18

เครื่องมือของฉันamp-what.com/#q=%3Eมีโหมด "CSS" เลือก "css" ที่ด้านล่างของหน้า ตามการอ้างอิง CSS ด้านบนสิ่งเหล่านี้จำเป็นต้องคั่นด้วยช่องว่างเมื่อไม่ชัดเจน

— ndp

@mathieu คุณสามารถใช้ 'เนื้อหา' เพื่อผนวกภาพแทนได้หรือไม่? เพียงแค่สงสัย

— weia design

1

@ อดัมไม่ถ้าคุณต้องการผนวกภาพใช้ "background-image" และ display: inline-block และความกว้าง: 123px; ความสูง: 123px; (ใช้ความกว้าง / ความสูงที่แน่นอน)

— นาธาน JB

177

CSS ไม่ใช่ HTML  เป็นการอ้างอิงอักขระที่มีชื่อใน HTML;  เทียบเท่ากับทศนิยมอ้างอิงตัวละครที่เป็นตัวเลข 160 เป็นจุดรหัสทศนิยมของNO-BREAK SPACEตัวละครในUnicode (หรือUCS-2 ; ดูข้อกำหนดHTML 4.01 ) เลขฐานสิบหกแทนจุดรหัสนั้นคือ U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ) คุณจะพบว่าในแผนภูมิรหัส Unicode และฐานข้อมูลตัวละครตัวฐานข้อมูล

ใน CSS คุณต้องใช้ลำดับ Unicode escape สำหรับตัวละครดังกล่าวซึ่งขึ้นอยู่กับค่าเลขฐานสิบหกของจุดรหัสของตัวละคร ดังนั้นคุณต้องเขียน

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

สิ่งนี้ทำงานได้ตราบใดที่ลำดับการหลบหลีกมาเป็นค่าสตริง หากตัวละครเป็นไปตามมีสองวิธีในการหลีกเลี่ยงการตีความผิด:

a) (กล่าวถึงโดยคนอื่น ๆ ) ใช้เลขฐานสิบหกหกหลักที่แน่นอนสำหรับลำดับหนี:

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

b) เพิ่มหนึ่ง white-space (เช่น space) อักขระหลังลำดับ escape:

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

(เนื่องจากfเป็นเลขฐานสิบหกหลัก\a0fมิฉะนั้นจะหมายถึงGURMUKHI LETTER EEที่นี่หรือਏหากคุณมีแบบอักษรที่เหมาะสม)

การลบพื้นที่สีขาวจะถูกละเว้นและสิ่งนี้จะปรากฏ fooขึ้นซึ่งพื้นที่ที่แสดงที่นี่จะเป็นNO-BREAK SPACEอักขระ

วิธีพื้นที่สีขาว ( '\a0 foo') มีข้อดีดังต่อไปนี้เมื่อเทียบกับวิธีหกหลัก ( '\0000a0foo'):

มันเป็นเรื่องง่ายที่จะพิมพ์เนื่องจากไม่จำเป็นต้องมีเลขศูนย์นำหน้าและไม่ต้องนับตัวเลข
มันเป็นเรื่องง่ายต่อการอ่านเพราะมี white-space ระหว่างลำดับ escape และข้อความต่อไปนี้และไม่จำเป็นต้องนับตัวเลข
มันต้องใช้พื้นที่น้อยลงเพราะเลขศูนย์นำหน้าไม่จำเป็น
มันเข้ากันได้มากขึ้นเพราะ Unicode รองรับจุดรหัสเกิน U + 10FFFF ในอนาคตจะต้องมีการแก้ไข CSS Specification

ดังนั้นเพื่อแสดงช่องว่างหลังจากที่ตัวละครหนีให้ใช้สองช่องว่างในสไตล์ชีท -

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

- หรือทำให้ชัดเจน:

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

ดูCSS 2.1, ส่วน "4.1.3 ตัวอักษรและตัวพิมพ์เล็ก"สำหรับรายละเอียด

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

+1 สำหรับเคล็ดลับ "เพื่อแสดงช่องว่างหลังจากตัวละครที่หลบหนี" แต่ต้องพูดถึงว่าการเพิ่ม an nbsp และจากนั้นช่องว่างชนิดหนึ่งจะเอาชนะจุดประสงค์ของ the nbsp;)

— TWiStErRob

@TWiStErRob ไม่มีการรวมกันของที่ไม่ทำลายอักขระช่องว่างตามด้วยอักขระช่องว่างทำลาย (หรือกลับกัน) จะแสดงช่องว่างเกี่ยวกับความกว้างของที่สองอักขระช่องว่างในขณะที่สองคนหรือมากกว่าคำต่อคำอักขระช่องว่างจะแสดงเฉพาะช่องว่างของ ความกว้างของอักขระเว้นวรรคหนึ่งตัวแยกวิเคราะห์ของเอ็นจิ้นเลย์เอาต์ยุบช่องว่างที่ต่อเนื่องกัน (รวมถึงการขึ้นบรรทัดใหม่) เป็นอักขระช่องว่างเว้นเสียแต่ว่าwhite-spaceคุณสมบัติ CSS จะประกาศเป็นอย่างอื่น

— แหลมปลาย

ใช่ฉันรู้เกี่ยวกับการยุบ แต่ประเด็นคือการไม่แบ่งคำตัวอักษรยังไม่ทำลายตามค่าเริ่มต้นดังนั้นการเพิ่มช่องว่างที่อยู่ถัดจากช่องว่างไม่ได้ทำให้ผลลัพธ์ที่ได้คือ ทำลาย white-space: normalผมกำลังพูดถึงสำหรับ

— TWiStErRob

@TWiStErRob โปรดอ่านคำตอบของฉันอย่างระมัดระวังมากขึ้น มันเป็นตัวอย่างสำหรับ "แสดง [ช่องว่าง] หลังจากตัวละครหนี" รหัสเดิมมีNO-BREAK SPACEตัวละครดังนั้นฉันจึงใช้ escape sequence สำหรับมัน คุณสามารถเลือกลำดับการหลบหนีอื่น ๆ หากจำเป็นคุณสามารถประกาศwhite-space: nowrapได้เช่นกัน

— PointedEars

81

อัปเดต : PointedEars กล่าวว่าจุดยืนที่ถูกต้องสำหรับ ในทุกสถานการณ์จะ
'\a0 'หมายถึงว่าช่องว่างนั้นเป็นจุดสิ้นสุดของสตริงฐานสิบหกและถูกดูดซับโดยลำดับที่หลบหนี เขาชี้ให้เห็นเพิ่มเติมคำอธิบายที่มีสิทธิ์นี้ซึ่งฟังดูเหมือนเป็นทางออกที่ดีสำหรับปัญหาที่ฉันอธิบายไว้

สิ่งที่คุณต้องทำคือใช้ Unicode ที่หลบหนี แม้ว่าสิ่งที่คุณได้รับการบอกกล่าว\00a0จะไม่ได้เป็นความสมบูรณ์แบบสำหรับ CSS ลองเลย:

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

โดยเฉพาะการใช้เป็น\0000a0  หากคุณลองตามที่แนะนำโดย mathieu และ millikin:

content:'No\00a0Break'   /* becomes No&#2571;reak */

มันจะใช้ B เป็นตัวละครที่หลบหนีจากฐานสิบหก สิ่งเดียวกันนี้เกิดขึ้นกับ 0-9a-fA-F

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

6

คุณเพียงแค่ต้องเว้นวรรคหลังลำดับ escape ตามที่ระบุไว้: '\a0 Break'. '\0000a0Break'คือไม่ได้มีความน่าเชื่อถือ

— แหลมปลาย

@PointedEars น่าสนใจดังนั้นพื้นที่นี้จึงเป็นเทอร์มิเนเตอร์และไม่รวมอยู่ในสตริง?

— dlamblin

2

ดูCSS 2.1 ส่วน "4.1.3 ตัวละครและกรณี" ซึ่งยังแสดงให้เห็นว่าวิธีการของคุณควรเชื่อถือได้ต่อ CSS 2.1 แต่ฉันพบว่าช่องว่างวิธีทำความสะอาด (เข้ากันได้ขึ้นไป) และมีรอยขนาดเล็ก

— แหลม

47

ใน CSS คุณต้องใช้ลำดับ Unicode escape แทน HTML Entities สิ่งนี้ขึ้นอยู่กับค่าเลขฐานสิบหกของตัวละคร

ฉันพบว่าวิธีที่ง่ายที่สุดในการแปลงสัญลักษณ์ให้เทียบเท่าเลขฐานสิบหกของพวกเขาเช่นจาก▾ ( ▾) ถึง\25BEคือการใช้เครื่องคิดเลข Microsoft =)

ใช่. เปิดใช้งานโหมดโปรแกรมเมอร์เปิดระบบทศนิยมใส่แล้วจึงเปลี่ยนเป็นหกเหลี่ยมและคุณจะได้รับ9662 25BEจากนั้นเพียงเพิ่มแบ็กสแลช\ไปที่จุดเริ่มต้น

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

4

ในขณะที่มีประโยชน์โดยสิ้นเชิงมันไม่ได้ตอบคำถามจริงๆดังนั้นนี่จะเป็นการแสดงความคิดเห็นต่อคำถามได้ดีขึ้น

— dlamblin

1

ลูกศรเล็กสีดำชี้ขวา (▸ \25B8 ▸ ▸) ftw ดูเพิ่มเติมที่en.wikipedia.org/wiki/Geometric_Shapes

— Joel Purra

2 Joel Purra อ่าน Wiki เพิ่มเติมในเวลา คุณเข้าใจผิดสัญลักษณ์

— netgoblin

@netgoblin: เป็นอย่างไร ฉันเพิ่งเกิดขึ้นเหมือนลูกศรเล็กสีดำชี้ขวา

— Joel Purra

1

ฉันใช้graphemica.comนี้ซึ่งคุณสามารถรับทศนิยมฐานสิบหกและอื่น ๆ ได้

— Mike

34

ใช้รหัสฐานสิบหกสำหรับพื้นที่ไม่แตก บางสิ่งเช่นนี้

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

— John Millikin
แหล่งที่มา

17

ไม่มีทางที่จะวางเป็นnbspCharMap เปิดและสำเนา - ตัวละครที่ 160 อย่างไรก็ตามในกรณีนี้ฉันอาจเว้นวรรคด้วยการขยายเช่นนี้

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

คุณอาจจำเป็นต้องตั้งค่า breadcrumbs display:inline-blockหรือบางสิ่งบางอย่าง

— กล้า
แหล่งที่มา

4

แทนที่จะวางที่ฉันจะใช้เอนทิตีเพื่อให้ชัดเจนกับผู้ดูแลในอนาคตว่ามันแตกต่างจากช่องว่าง

— nickf

2

ในทางกลับกันคุณไม่ควรทำขนมปังเกล็ดขนมปังตามที่ควรจะเป็นเช่น: สัญลักษณ์ควรอยู่ในแนวเดียวกับเกล็ดขนมปังไม่ใช่แค่สไตล์การมองเห็น อย่างน้อยถ้าคุณต้องการให้ google เห็น breadcrumb ของคุณและแสดงรายการไว้ในรายชื่อของคุณในเครื่องมือค้นหา

— Dementic

10

ตัวอย่างเช่น :

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

ตัวอย่าง: หากคุณต้องการเลือกตัวละครของคุณฉันเลือก "& # 8620" "& # x21ac" (เราใช้ค่าHEX )

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

ผลลัพธ์: ↬

แค่นั้นแหละ :)

— Ferhat KOÇER
แหล่งที่มา

ฉันใช้เนื้อหา: '\ 10095'; . แต่ผลลัพธ์ไม่แสดง แทนที่จะเป็นไอคอนมันแสดงสี่เหลี่ยมผืนผ้า

— kapil

0

ฉันรู้ว่านี่เป็นโพสต์เก่าที่น่ารัก แต่ถ้าการเว้นวรรคเป็นสิ่งที่คุณต้องการ

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

ฉันใช้วิธีนี้มาก่อน มันล้อมรอบเส้นอื่น ๆ ด้วย ">" อย่างสมบูรณ์ในการทดสอบของฉัน

— ไบรอันเวลช์
แหล่งที่มา

-2

นี่คือสองวิธี:

ใน HTML:

<div class="ics">⛱</div>

สิ่งนี้จะส่งผลให้⛱

ใน Css:

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

ด้วยรหัส HTML <div class="ics"></div>

นอกจากนี้ยังส่งผลให้⛱

— Tarandeep Singh
แหล่งที่มา

คำตอบที่ถูกต้องคือ. ics :: before {content: '\ 9969';}

— Marco Scarnatto