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: ' ';
}
html
css
html-entities
css-content
nickf
sumber
sumber
:after
untuk mengatur, misalnya, indikator sort / desc pada kolom yang diurutkan.Jawaban:
Anda harus menggunakan kode kunci yang diloloskan:
Suka
Info lebih lanjut tentang: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
sumber
'>\a0'
cukup.'>\a0 bc'
ditampilkan> bc
.CSS bukan HTML.
adalah referensi karakter bernama dalam HTML; setara dengan referensi karakter numerik desimal 
. 160 adalah desimal titik kode dariNO-BREAK SPACE
karakter 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
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:
b) Tambahkan satu karakter spasi putih (mis. spasi) setelah urutan escape:
(Karena
f
merupakan digit heksadesimal,\a0f
artinya diGURMUKHI LETTER EE
sini, atau ਏ jika Anda memiliki font yang sesuai.)Ruang putih pembatas akan diabaikan, dan ini akan ditampilkan
foo
, di mana ruang yang ditampilkan di sini adalahNO-BREAK SPACE
karakter.Pendekatan white-space (
'\a0 foo'
) memiliki keunggulan berikut dibandingkan pendekatan enam digit ('\0000a0foo'
):Jadi, untuk menampilkan spasi setelah karakter yang keluar, gunakan dua spasi dalam stylesheet -
- atau membuatnya eksplisit:
Lihat CSS 2.1, bagian "4.1.3 Karakter dan huruf" untuk detail.
sumber
white-space
properti CSS menyatakan sebaliknya.white-space: normal
.NO-BREAK SPACE
karakter, jadi saya menggunakan urutan melarikan diri untuk itu. Anda dapat memilih urutan pelarian lainnya; jika diperlukan, Anda dapat mendeklarasikanwhite-space: nowrap
juga.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
\00a0
bukanlah dukungan sempurna
dalam CSS; jadi cobalah:Khusus menggunakan
\0000a0
sebagai
. Jika Anda mencoba, seperti yang disarankan oleh mathieu dan millikin:Dibutuhkan B ke dalam karakter hex lolos. Hal yang sama terjadi dengan 0-9a-fA-F.
sumber
'\a0 Break'
.'\0000a0Break'
adalah tidak dapat diandalkan.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 ▾ (
▾
)\25BE
adalah dengan menggunakan kalkulator Microsoft =)Iya. Aktifkan mode programmer, nyalakan sistem desimal, masuk
9662
, lalu beralih ke hex dan Anda akan mendapatkannya25BE
. Kemudian tambahkan saja garis miring terbalik\
ke awal.sumber
\25B8
▸
▸
) ftw. Juga, lihat en.wikipedia.org/wiki/Geometric_Shapes untuk lebih lanjut.Gunakan kode hex untuk ruang yang tidak melanggar. Sesuatu seperti ini:
sumber
Ada cara untuk menempelkan
nbsp
CharMap yang terbuka dan menyalin karakter 160 . Namun, dalam hal ini saya mungkin akan mengeluarkannya dengan bantalan, seperti ini:Anda mungkin perlu mengatur remah roti
display:inline-block
atau sesuatu.sumber
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 )
Hasil: ↬
Itu dia :)
sumber
Saya tahu ini adalah posting yang cukup lama, tetapi jika spasi adalah milik Anda, mengapa tidak cukup:
Saya telah menggunakan metode ini sebelumnya. Itu membungkus dengan sangat baik untuk baris lain dengan ">" di sisinya dalam pengujian saya.
sumber
Berikut ini dua cara:
Dalam HTML:
<div class="ics">⛱</div>
Ini akan menghasilkan ⛱
Dalam Css:
.ics::before {content: "\9969;"}
dengan kode HTML
<div class="ics"></div>
Ini juga menghasilkan ⛱
sumber