Contenteditable, :: selector stil ve imleç konumundan önce

Question

Kapsamlı bir div alanı kullanarak, CSS, satır içi stil öğesinin ilk harfinden önce imlecin yerleştirilemediği sorunlar (şu anda yalnızca Chrome'da test ediliyor) yaşıyorum. psuedo-selector ::before, "tag" den önce içerik eklemek için kullanılır.

Bu örnek, bir içerik editörü içindeki özel etiketleri görüntülemek/stillemek için kullanılır. Her etiket endeksli ve bu indeks, etiket metninin solunda görüntülenir.

Bağımsız örnek: önceden http://codepen.io/TheFoot/pen/pydqQb

Teşekkür ..

DÜZENLEME: gömülü etiket sorun kaybolduktan display: block, ama bu/stil satır içi vurgulamak ihtiyacını bozulursa @Sonny, belirttiği gibi metnin bölümleri.

Answer 1

biraz yeşil böcek sürücüler ha deli gibi geliyor? Neyse. TAG'ı javascript ile yerleştirdiğinizi düşünüyorum, bu yüzden bir çeşit işleviniz olmalı? Hızlı ve kirli bir çözüm, etiket açılmadan önce bu işleve görünmez bir karakter eklemek olabilir. Yani mesela

<div class="tag" data-idx="6">&#x2063;maturity...</div> 

Ya da sadece kopyalayıp buraya bu oklar arasında bulabilirsiniz (gerçek karakterini yapıştırabilirsiniz:. O görünmez olarak, tam olarak neye ihtiyacınız simüle

--->⁣<---

[DÜZ :]

kullanıcı siler durumunda görünmez karakterini reappend istiyorsanız :)

. block`: Cevabınız için

http://codepen.io/anon/pen/wddoBN

Answer 2

Buradaki sorun, bu sorun olan div'un inline-block olmasıdır. Temin edilebilirlik sadece blok seviyesindeki elemanlara uygulanmalıdır (başlıklar hariç). insanlar bir çift sözü var

bir kılavuz blok düzeyi elemanları contenteditable yapılması gerektiğidir. Bununla birlikte, Mozilla Geliştirici Ağı, h1'den h6'ya kadar olan yönlendirme öğelerini, blok düzeyindeki öğeler olarak listeler ve Firefox4'te bir yönlendirme öğesi, buggy'dir ve Chrome5'te sayfayı kilitleyebilir.

Burada bu cevap biraz daha fazla bilgi okuyabilir: Which elements can be safely made contenteditable?