CSS içeriğini kullanarak HTML objeleri ekleme

HTML objeleri eklemek için CSS content özelliğini nasıl kullanıyorsunuz ?

Bunun gibi bir şey kullanmak, sadece  kırılmayan alan yerine ekrana yazdırılır :

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

Kaçan unicode'u kullanmalısınız:

Sevmek

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

Daha fazla bilgi için: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

CSS HTML değil. HTML'de  adlandırılmış bir karakter başvurusudur ; ondalık sayısal karakter referansına eşdeğerdir  . 160 ondalık bir kod noktası arasında NO-BREAK SPACEkarakter Unicode (veya UCS-2 , bakınız HTML 4.01 ). Bu kod noktasının onaltılı gösterimi U + 00A0'dır (160 = 10 × 16 ¹ + 0 × 16 ⁰ ). Bunu Unicode Kod Grafikleri ve Karakter Veritabanında bulabilirsiniz .

CSS'de, bu tür karakterler için bir karakterin kod noktasının onaltılık değerine dayanan bir Unicode kaçış dizisi kullanmanız gerekir. Yani yazman gerek

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

Bu çıkış dizisi bir dize değerinde son geldiği sürece çalışır. Karakterler takip ederse, yanlış yorumlanmayı önlemenin iki yolu vardır:

a) (başkaları tarafından bahsedilen) Kaçış dizisi için tam olarak altı onaltılık basamak kullanın:

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

b) Kaçış dizisinden sonra bir boşluk (ör. boşluk) karakteri ekleyin:

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

( fOnaltılık bir rakam olduğundan \a0f, aksi takdirde GURMUKHI LETTER EEburada veya uygun bir fontunuz varsa ਏ anlamına gelir .)

Sınırlayıcı beyaz boşluk göz ardı edilecek ve  fooburada görüntülenen alanın bir NO-BREAK SPACEkarakter olacağı yerlerde bu görüntülenecektir .

Beyaz boşluk yaklaşımı ( '\a0 foo'), altı basamaklı yaklaşıma ( '\0000a0foo') göre aşağıdaki avantajlara sahiptir :

• yazmak daha kolaydır , çünkü önde gelen sıfırlar gerekli değildir ve rakamların sayılması gerekmez;
• bu kolay okunur orada çıkış sırası aşağıdaki metin arasında beyaz boşluk olduğunu ve basamak sayılacak gerekmez, çünkü;
• o daha az yer gerektirir lider sıfır gerekli değildir çünkü;
• bunun yukarı doğru uyumlu , çünkü Unicode destek kodları gelecekte U + 10FFFF değerinin ötesinde CSS Spesifikasyonu'nda bir değişiklik yapılmasını gerektirecektir.

Böylece, çıkış karakterinden sonra boşluk görüntülemek için stil sayfasında iki boşluk kullanın -

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

- veya açık bir şekilde belirtin:

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

Ayrıntılar için bkz. CSS 2.1, "4.1.3 Karakterler ve büyük / küçük harf" bölümü .

Güncelleme : PointedEars,  tüm css durumlarında doğru duruşun
'\a0 ', alanın hex dizesine bir sonlandırıcı olduğunu ve kaçan dizi tarafından emildiğini ima edeceğinden bahseder . Ayrıca aşağıda tarif ettiğim ve çözdüğüm soruna iyi bir çözüm gibi görünen bu yetkili açıklamaya dikkat çekti .

Yapmanız gereken kaçan unicode'u kullanmak. Size söylenenlere rağmen CSS \00a0için mükemmel bir stand-in değil  ; o zaman dene:

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

Özellikle \0000a0as  . Mathieu ve millikin tarafından önerildiği gibi denerseniz:

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

B'yi onaltılık karakterlerden alır. Aynı şey 0-9a-fA-F için de geçerlidir.

CSS'de HTML Varlıkları yerine bir Unicode kaçış dizisi kullanmanız gerekir. Bu, bir karakterin onaltılı değerini temel alır.

Sembolü onaltılık eşdeğerine dönüştürmenin en kolay yolunun calculator ( ▾) 'den \25BEMicrosoft hesap makinesi =)

Evet. Programcılar modunu etkinleştirin, ondalık sistemi açın, girin 9662ve onaltılı olarak değiştirin 25BE. Sonra \başlangıca bir ters eğik çizgi ekleyin .

Kesintisiz bir alan için hex kodunu kullanın. Bunun gibi bir şey:

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

nbspAçık bir CharMap yapıştırmanın ve 160 karakterini kopyalamanın bir yolu vardır . Ancak, bu durumda muhtemelen dolgu ile boşluk bırakıyorum, şöyle:

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

display:inline-blockBununla birlikte , ekmek kırıntılarını veya başka bir şeyi ayarlamanız gerekebilir .

Örneğin :

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

Örnek: Karakterinizi seçmek istiyorsanız, "& # 8620" "& # x21ac" seçtim ( HEX değerlerini kullanıyoruz)

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

Sonuç: ↬

Bu kadar :)

Bu oldukça eski bir yazı olduğunu biliyorum, ama boşluk tüm senin peşinde ise, neden sadece:

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

Bu yöntemi daha önce kullandım. Benim test yan yana ">" ile diğer satırlara mükemmel ince sarar.

İşte iki yol:

• HTML'de:

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

Bu, ⛱

• Css cinsinden:

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

HTML kodu ile <div class="ics"></div>

Bu ayrıca ⛱