Sözde öğe içeriğinden önce :: sonra veya :: satırına satır sonu ekleyin

Bir sayfanın HTML veya PHP'sine erişimim yok ve yalnızca CSS aracılığıyla düzenleme yapabiliyorum. Bir sitede değişiklikler yapıyorum ve ::afterveya aracılığıyla metin ekliyorum::before sözde öğeler ve Unicode çıkışının eklenen içerikten önce veya sonra boşluk gibi şeyler için kullanılması gerektiğini .

Nasıl birden çok satır eklerim content ?

Örneğin, HTML kesme satırı öğesi yalnızca elde etmek istediğim şeyi görselleştirmek içindir :

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

contentMülkiyet durumları:

Yazarlar, "\ A" kaçış dizisini "içerik" özelliğinden sonra dizelerden birine yazarak oluşturulan içeriğe yeni satırlar ekleyebilirler. Bu eklenen satır sonu, hala 'beyaz boşluk' özelliğine tabidir. "\ A" kaçış dizisi hakkında daha fazla bilgi için "Dizeler" ve "Karakterler ve durum" konusuna bakın.

Böylece şunları kullanabilirsiniz:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

Bununla birlikte, rastgele dizelerden kaçarken, bunun \00000ayerine kullanılması önerilir \A, çünkü [a-f]yeni satırın ardından gelen herhangi bir sayı veya karakter öngörülemeyen sonuçlar verebilir :

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

Temelleri açıklayan güzel makale (ancak satır sonlarını kapsamaz).

Bir Demet Şaşırtıcı Sözde Öğenin Yapabileceği Şey

Birinin başka bir öğe içinde sonraki satıra girdiği iki satır içi öğeye ihtiyacınız varsa, bunu sözde öğe: sonra içerik: '\ A' ve beyaz boşluk: pre ekleyerek gerçekleştirebilirsiniz.

HTML

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

CSS

.label:after {
    content: '\A';
    white-space: pre;
}

Bir araç ipucunda yeni satırlar olması gerekiyordu. Bu CSS'yi: sonrasına eklemek zorunda kaldım:

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

Sözcük kaydırma gerekli görünüyor.

Ek olarak, \ A yeni bir satıra zorlamak için görüntülenecek metnin ortasında çalışmadı.

 
 

çalıştı. Daha sonra böyle bir ipucu elde edebildim:

Bunu deneyebilirsin

#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}

Js Fiddle

"Yeni satır işareti ekleyerek sözde öğede dinamik olarak içerik nasıl değiştirilir" arayacak kişiler için yanıt burada

Html karakterleri gibi 
Bu karakterler belge oluşturmada değiştirildiği için JavaScript kullanarak html'ye eklemek çalışmaz.

Bunun yerine, U + 000D ve U + 000A olan bu karakterlerin unicode temsilini bulmanız gerekir, böylece şöyle bir şey yapabiliriz:

var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);

div:before{
   content: attr(text);
   white-space: pre;
}

<div text='I want to break it in javascript, after comma sign'></div> 

Umarım bu birisine zaman kazandırır, iyi şanslar :)

Satır sonu ::afterveya ::beforesözde öğe içeriğine ekleyin

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

Aynı şeyi soran şu soruyu burada buldum : CSS "içerik" özelliğinde Newline karakter dizisi?

Dış görünüş kullanabileceğiniz gibi \Aya \00000aa ulaşmak içinnewline

<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>

.Mbr ve .dbr sınıfları CSS kullanarak satır sonu davranışını simüle edebilirsiniz display: tablo . Gerçeğini değiştirmek isterseniz kullanışlıdır <br />.

Bu demo Codepen göz atın https://codepen.io/Marko36/pen/RBweYY ,
ve duyarlı site kullanımı bu yazı: Duyarlı bir satır sonu: benzetmek <br /> verilen kopma noktalarında .