Pertanyaan Menambahkan entitas HTML menggunakan konten CSS


Bagaimana Anda menggunakan CSS content properti untuk menambahkan entitas html?

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

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

877
2017-10-10 07:19


asal


Jawaban:


Anda harus menggunakan unicode yang lolos:

Seperti

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

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


942
2017-10-10 07:27



CSS bukan HTML.   adalah nama referensi karakter dalam HTML; setara dengan referensi karakter angka desimal  . 160 adalah desimal titik kode dari NO-BREAK SPACE karakter dalam Unicode (atau UCS-2; lihat Spesifikasi HTML 4.01). Representasi heksadesimal dari titik kode itu adalah U + 00A0 (160 = 10 × 161 + 0x160). Anda akan menemukan itu di Unicode Diagram Kode dan Basis Data Karakter.

Dalam CSS Anda perlu menggunakan urutan pelolosan Unicode untuk karakter seperti itu, yang didasarkan pada nilai heksadesimal titik kode karakter. Jadi, Anda 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 (e. g., ruang) setelah urutan pelolosan:

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

(Sejak f adalah digit heksadesimal, \a0f sebaliknya akan berarti GURMUKHI LETTER EE di 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 akan menjadi NO-BREAK SPACE karakter.

Pendekatan ruang-putih ('\a0 foo') memiliki kelebihan sebagai berikut atas pendekatan enam digit ('\0000a0foo'):

  • ini lebih mudah untuk mengetik, karena memimpin nol tidak diperlukan, dan digit tidak perlu dihitung;
  • ini lebih mudah dibaca, karena ada ruang putih antara urutan pelarian dan teks berikut, dan digit tidak perlu dihitung;
  • saya t membutuhkan lebih sedikit ruang, karena memimpin nol tidak diperlukan;
  • ini ke atas kompatibel, karena poin kode pendukung Unicode melampaui U + 10FFFF di masa depan akan membutuhkan modifikasi dari Spesifikasi CSS.

Jadi, untuk menampilkan spasi setelah karakter yang kabur, gunakan dua spasi di 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 detailnya.


144
2017-12-21 20:18



Memperbarui: PointedEars menyebutkan bahwa stand yang tepat untuk   dalam semua situasi css akan
'\a0 ' menyiratkan bahwa ruang adalah terminator ke string hex dan diserap oleh urutan melarikan diri. Dia lebih lanjut menunjukkan ini keterangan resmi yang terdengar seperti solusi yang baik untuk masalah yang saya jelaskan dan diperbaiki di bawah ini.

Yang perlu Anda lakukan adalah menggunakan unicode yang lolos. Terlepas dari apa yang Anda sudah diberitahu \00a0bukan stand-in yang sempurna untuk   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 */

Khususnya menggunakan \0000a0 sebagai  . Jika Anda mencoba, seperti yang disarankan oleh mathieu dan millikin:

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

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


77
2017-09-11 19:09



Dalam CSS Anda perlu menggunakan urutan pelarian Unicode sebagai ganti Entitas HTML. Ini didasarkan pada nilai heksadesimal karakter.

Saya menemukan bahwa cara termudah untuk mengubah simbol ke ekuivalen heksadesimalnya adalah, seperti dari ▾ (▾) ke \25BE adalah menggunakan kalkulator Microsoft =)

Iya nih. Aktifkan mode pemrogram, aktifkan sistem desimal, masukkan 9662, lalu beralih ke hex dan Anda akan mendapatkan 25BE. Kemudian tambahkan saja backslash \ ke awal.


39
2017-12-15 16:55



Gunakan kode hex untuk ruang non-breaking. Sesuatu seperti ini:

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

31
2017-10-10 07:24



Ada cara untuk menempelkan nbsp - buka CharMap dan salin karakter 160. Namun, dalam hal ini saya mungkin akan menghabiskannya dengan padding, seperti ini:

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

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


16
2017-12-05 08:16



Sebagai contoh :

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

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

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

Hasil: ↬

Itu dia :)


8
2018-05-07 15:35



Saya tahu ini adalah posting yang cukup lama, tetapi jika jaraknya adalah semua setelah Anda, mengapa tidak begitu saja:

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

Saya telah menggunakan metode ini sebelumnya. Ini membungkus baik-baik saja ke garis lain dengan ">" oleh sisinya dalam pengujian saya.


0
2017-11-04 06:36



Berikut dua cara: 

  • Dalam HTML:

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

Ini akan menghasilkan    ⛱

  • Di Css:

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

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

Ini juga menghasilkan ⛱


-2
2017-10-06 08:47