Menambahkan entitas HTML menggunakan konten CSS


1013

Bagaimana Anda menggunakan properti CSS content untuk menambahkan entitas HTML ?

Menggunakan sesuatu seperti ini hanya mencetak  ke layar alih-alih ruang yang tidak putus:

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

5
Dalam arti yang berbeda, menambahkan konten menggunakan CSS melanggar pemisahan kekhawatiran, CSS dimaksudkan untuk definisi gaya saja. Lebih baik untuk menghindari dari sudut pandang aksesibilitas, karena menonaktifkan CSS merusak seluruh tanda ke atas. Namun, sangat bagus untuk menambahkan gambar menggunakan teknik ini.
questzen

95
Tergantung. Dalam hal ini untuk keperluan presentasi. Itu akan "melanggar" SoC untuk menempatkan ">" di html
mathieu

2
Hanya pertanyaan, apakah Anda pikir itu akan lebih baik sebagai daftar yang dipesan? Maksud saya, ini adalah daftar dengan pesanan bukan?
alex

3
@questzen - Saya pikir ini bisa diterima (dan bentuk yang bagus) untuk menggunakan CSS :afteruntuk mengatur, misalnya, indikator sort / desc pada kolom yang diurutkan.
Josh M.

9
Saya perhatikan orang-orang sudah tergila-gila dengan prinsip SoC. Surga, konten seperti apa tanda ">" untuk Anda ?! Mengasihani! itu hanya ikon dalam konteks ini, widget, peluru, sebut saja. Bagi saya konten adalah sesuatu yang saya ingin dapat dicari.
user776686

Jawaban:


1063

Anda harus menggunakan kode kunci yang diloloskan:

Suka

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

Info lebih lanjut tentang: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/


57
Angka nol di permukaan berlebihan, lihat CSS 2.1: 4.3.7 String . '>\a0'cukup.
PointedEars

18
@ dlamblin Selanjutnya, untuk menghindari karakter diinterpretasikan sebagai bagian dari urutan escape secara andal , tambahkan spasi putih standar: '>\a0 bc'ditampilkan > bc.
PointedEars

18
Alat saya amp-what.com/#q=%3E menyediakan mode "CSS". Pilih "css" di bagian bawah halaman. Per referensi CSS di atas, ini perlu dibatasi ruang ketika mereka ambigu.
ndp

@mathieu Bisakah Anda menggunakan 'konten' untuk menambahkan gambar? Hanya ingin tahu
desain weia

1
@ Adam, tidak, jika Anda ingin menambahkan gambar, gunakan "background-image" dan tampilkan: inline-block; dan lebar: 123px; tinggi: 123px; (gunakan lebar / tinggi persis)
Nathan JB

177

CSS bukan HTML.  adalah referensi karakter bernama dalam HTML; setara dengan referensi karakter numerik desimal  . 160 adalah desimal titik kode dari NO-BREAK SPACEkarakter dalam Unicode (atau UCS-2 , melihat HTML 4.01 Specification ). Representasi heksadesimal dari titik kode tersebut adalah U + 00A0 (160 = 10 × 16 1 + 0 × 16 0 ). Anda akan menemukan itu di Bagan Kode Unicode dan Database Karakter .

Dalam CSS Anda perlu menggunakan urutan pelepasan Unicode untuk karakter tersebut, yang didasarkan pada nilai heksadesimal dari titik kode karakter. Jadi kamu perlu menulis

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

Ini berfungsi selama urutan pelarian datang terakhir dalam nilai string. Jika karakter mengikuti, ada dua cara untuk menghindari salah tafsir:

a) (disebutkan oleh orang lain) Gunakan tepat enam digit heksadesimal untuk urutan pelarian:

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

b) Tambahkan satu karakter spasi putih (mis. spasi) setelah urutan escape:

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

(Karena fmerupakan digit heksadesimal, \a0fartinya di GURMUKHI LETTER EEsini, atau ਏ jika Anda memiliki font yang sesuai.)

Ruang putih pembatas akan diabaikan, dan ini akan ditampilkan  foo, di mana ruang yang ditampilkan di sini adalah NO-BREAK SPACEkarakter.

Pendekatan white-space ( '\a0 foo') memiliki keunggulan berikut dibandingkan pendekatan enam digit ( '\0000a0foo'):

  • itu adalah lebih mudah untuk tipe , karena nol terkemuka tidak diperlukan, dan angka tidak perlu dihitung;
  • itu adalah mudah dibaca , karena ada putih-ruang antara urutan escape dan teks berikut, dan angka tidak perlu dihitung;
  • itu membutuhkan ruang kurang , karena nol terkemuka tidak diperlukan;
  • itu kompatibel ke atas , karena Unicode yang mendukung titik kode di luar U + 10FFFF di masa mendatang akan memerlukan modifikasi Spesifikasi CSS.

Jadi, untuk menampilkan spasi setelah karakter yang keluar, gunakan dua spasi dalam stylesheet -

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

- atau membuatnya eksplisit:

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

Lihat CSS 2.1, bagian "4.1.3 Karakter dan huruf" untuk detail.


+1 untuk trik "untuk menampilkan spasi setelah karakter yang lolos", tetapi harus menyebutkan bahwa menambahkan nbsp dan kemudian jenis ruang mengalahkan tujuan nbsp;)
TWiStErRob

@TWiStErRob No, kombinasi dari karakter spasi non-terobosan diikuti oleh karakter spasi (atau sebaliknya) akan menampilkan celah tentang lebar dua karakter spasi, sementara dua atau lebih karakter spasi kata demi kata hanya akan menampilkan celah lebar satu karakter spasi sebagai parser dari mesin tata letak runtuh spasi spasi berturut-turut (termasuk baris baru) menjadi satu karakter spasi kecuali white-spaceproperti CSS menyatakan sebaliknya.
PointedEars

ya, saya tahu tentang collapsing, tapi intinya dari nbsp adalah itu tidak melanggar, kata chars juga tidak melanggar secara default, jadi menambahkan ruang melanggar di sebelah yang tidak melanggar tidak masuk akal, hasil akhirnya akan menjadi pemecahan. Saya berbicara untuk white-space: normal.
TWiStErRob

@TWiStErRob Harap baca jawaban saya lebih hati-hati. Ini adalah contoh untuk "menampilkan ruang setelah karakter yang lolos". Kode asli memiliki NO-BREAK SPACEkarakter, jadi saya menggunakan urutan melarikan diri untuk itu. Anda dapat memilih urutan pelarian lainnya; jika diperlukan, Anda dapat mendeklarasikan white-space: nowrapjuga.
PointedEars

81

Pembaruan : PointedEars menyebutkan bahwa stand yang benar untuk  dalam semua situasi css akan
'\a0 'menyiratkan bahwa ruang adalah terminator ke string hex dan diserap oleh urutan lolos. Dia lebih jauh menunjukkan deskripsi otoritatif ini yang terdengar seperti solusi yang baik untuk masalah yang saya uraikan dan perbaiki di bawah.

Yang perlu Anda lakukan adalah menggunakan unicode kabur. Meskipun apa yang telah diberitahukan kepada Anda \00a0bukanlah dukungan sempurna  dalam CSS; jadi cobalah:

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

Khusus menggunakan \0000a0sebagai  . Jika Anda mencoba, seperti yang disarankan oleh mathieu dan millikin:

content:'No\00a0Break'   /* becomes No਋reak */

Dibutuhkan B ke dalam karakter hex lolos. Hal yang sama terjadi dengan 0-9a-fA-F.


6
Anda hanya perlu menempatkan spasi setelah urutan escape, seperti yang ditentukan: '\a0 Break'. '\0000a0Break'adalah tidak dapat diandalkan.
PointedEars

@PointedEars Menarik, jadi ruang ini adalah terminator dan tidak dimasukkan ke dalam string?
dlamblin

2
Lihat CSS 2.1, bagian "4.1.3 Karakter dan huruf" . Yang juga menunjukkan bahwa pendekatan Anda HARUS dapat diandalkan per CSS 2.1. Tapi saya menemukan pendekatan spasi putih lebih bersih (kompatibel ke atas) dan memiliki tapak yang lebih kecil.
PointedEars

47

Di CSS Anda perlu menggunakan urutan pelepasan Unicode sebagai pengganti Entitas HTML. Ini didasarkan pada nilai heksadesimal karakter.

Saya menemukan bahwa cara termudah untuk mengkonversi simbol ke ekivalen heksadesimal mereka adalah, seperti dari ▾ ( ▾) \25BEadalah dengan menggunakan kalkulator Microsoft =)

Iya. Aktifkan mode programmer, nyalakan sistem desimal, masuk 9662, lalu beralih ke hex dan Anda akan mendapatkannya 25BE. Kemudian tambahkan saja garis miring terbalik \ke awal.


4
Meskipun benar-benar bermanfaat, itu tidak benar-benar menjawab pertanyaan sehingga ini akan lebih baik sebagai komentar untuk pertanyaan itu.
dlamblin

1
Panah kecil hitam menunjuk kanan (▸ \25B8 ▸ ▸) ftw. Juga, lihat en.wikipedia.org/wiki/Geometric_Shapes untuk lebih lanjut.
Joel Purra

2Joel Purra, baca Wiki lebih banyak waktu. Anda salah mengira simbol.
netgoblin

@netgoblin: bagaimana bisa begitu? Kebetulan saya suka panah kecil hitam yang menunjuk kanan.
Joel Purra

1
Saya menggunakan graphemica.com ini di mana Anda bisa mendapatkan Desimal, Heksadesimal, dan sebagainya
Mike

34

Gunakan kode hex untuk ruang yang tidak melanggar. Sesuatu seperti ini:

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

17

Ada cara untuk menempelkan nbspCharMap yang terbuka dan menyalin karakter 160 . Namun, dalam hal ini saya mungkin akan mengeluarkannya dengan bantalan, seperti ini:

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

Anda mungkin perlu mengatur remah roti display:inline-blockatau sesuatu.


4
Alih-alih menempelkan nbsp, saya akan tetap menggunakan entitas, sehingga jelas bagi pengelola masa depan bahwa itu berbeda dengan ruang.
nickf

2
di sisi lain, Anda tidak melakukan remah roti seperti yang seharusnya, yaitu: simbol> harus sejalan dengan remah roti, dan bukan hanya gaya visual. setidaknya jika Anda ingin google melihat remah roti Anda dan daftar di bawah daftar Anda di mesin pencari.
Demensik

10

Sebagai contoh :

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

Contoh: Jika Anda ingin memilih karakter Anda, saya memilih "& # 8620" "& # x21ac" (Kami menggunakan nilai HEX )

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

Hasil: ↬

Itu dia :)


saya menggunakan konten: '\ 10095'; . Tetapi hasilnya tidak ditampilkan. alih-alih ikon, itu menunjukkan persegi panjang.
kapil

0

Saya tahu ini adalah posting yang cukup lama, tetapi jika spasi adalah milik Anda, mengapa tidak cukup:

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

Saya telah menggunakan metode ini sebelumnya. Itu membungkus dengan sangat baik untuk baris lain dengan ">" di sisinya dalam pengujian saya.


-2

Berikut ini dua cara:

  • Dalam HTML:

    <div class="ics">&#9969;</div>

Ini akan menghasilkan ⛱

  • Dalam Css:

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

dengan kode HTML <div class="ics"></div>

Ini juga menghasilkan ⛱


Jawaban yang benar adalah .ics :: before {content: '\ 9969';}
Marco Scarnatto
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.