Cum setez span background-color astfel încât să se coloreze fundalul pe toată linia ca în div (display: block; nu este o opțiune) (Programare, Javascript, Html, Css)

Michael Andersen a intrebat.
a intrebat.

Am nevoie să stilizez un text în cadrul unui pre-element. Pentru asta, folosesc un element span inline ca acesta:

<pre>
some text <span style="background-color:#ddd;">and some text
with a different background</span> and some more text
</pre>

Apoi html-ul este redat, fundalul span-elementului este schimbat doar sub text.

Este cumva posibil să fac ca culoarea de fundal să se extindă pe toată linia fără a schimba afișarea la block sau inline-block.

Sau există o modalitate de a realiza acest lucru cu javascript?

Comentarii

  • Nu chiar, nu (deși poate cu JS). Este display: block o problemă din anumite motive? –  > Por David spune să o repunem pe Monica.
  • Întrebarea ta este puțin neclară. Ce parte a textului de exemplu ar trebui să aibă imaginea de fundal? –  > Por Jimmy Shelter.
  • Nu pare să aibă legătură cu programarea. Aș întreba acest lucru pe doctype.com în schimb. –  > Por Eric Anastas.
  • Motivul pentru care display: block; este o problemă, este că poate exista text și un span-start pe aceeași linie. Div-ul ar introduce o întrerupere de linie care nu ar trebui să fie acolo. –  > Por Michael Andersen.
  • Bună @MichaelAndersen… văd că ești încă un utilizator S.O. în timp ce ești la UofC ;-)–~~ … … ai putea să accepți un răspuns la această întrebare, astfel încât unul bun să fie prioritizat în partea de sus? (Este o prostie că S.O. sortează acest răspuns incomplet/inexact în partea de sus din moment ce întrebarea nu are o răspuns acceptat. La prima vedere, cineva ar fi înclinat să țină cont de sfaturile de pe primul răspuns, în loc să dea scroll pentru a le găsi pe cele mai exacte de mai jos). –  > Por ashleedawg.
4 răspunsuri
tmpvar

puteți obține acest lucru prin formatarea textului într-un mod diferit. Eu am obținut ceea ce cred că cauți cu următoarele:

    <pre>
    some text<span style="background-color:#ddd;">
    and some text
    with a different background</span>
    and some more text
    </pre>

Comentarii

  • Nu în safari sau firefox. Îmi cer scuze dacă nu am fost suficient de clar. Culoarea de fundal trebuie să continue până la capătul căsuței care o conține. În acest caz, partea dreaptă a preelementului. –  > Por Michael Andersen.
Rich Adams

Elementul span este inline, deci schimbă doar fundalul pentru locul în care l-ați plasat. Deoarece se află, de asemenea, în cadrul unui element <pre> dacă doriți ca acesta să schimbe fundalul și pentru spațiile albe din jurul textului, atunci puteți include acele spații albe în cadrul elementului span.

De exemplu, acest lucru ar face ca fundalul să se schimbe pentru unele spații albe de la sfârșitul fiecărui rând, precum și în spatele textului (dar numai din cauza tag-ului pre este că spațiul alb este luat în considerare, fără pre spațiul alb ar fi ignorat în mod normal).

<pre>
some text
<span style="background-color:#ddd;">and some text                   <br/>
with a different background           </span>
and some more text
</pre>

Ce vă împiedică să folosiți un element de bloc? Ar fi mult mai bine fie să faceți ca span-ul să fie afișat ca element de bloc și nu inline atunci când se află în această parte specifică, fie să folosiți un element de bloc pentru început, în loc de un span. De exemplu,

<html>
<head>
    <style>
    pre span { display: block; }
    </style>
</head>
<body>
    <pre>
    some text
    <span style="background-color:#ddd;">and some text<br/>
    with a different background</span>
    and some more text
    </pre>
</body>
</html>

Comentarii

  • Motivul pentru care nu poate fi un element de bloc este că ar introduce întreruperi de linie, apoi un span începe și se termină pe aceeași linie cu alte elemente sau cu alt text. Îmi cer scuze pentru neînțelegere. Am corectat exemplul pentru clarificare. –  > Por Michael Andersen.
Mic

Puteți încerca să lucrați în modul invers, are mai multe marcaje, dar face ceea ce doriți.

<pre>
<div style="background-color:#ddd;float:left"><span style="background-color:#fff">some text</span>and some text
with a different background <span style="background-color:#fff">and some more text</span>
</div>
</pre>

Comentarii

  • Frumos. Dar introduce o problemă textul gri din primul rând este mai lung decât textul alb din al doilea rând. Apoi, a doua linie va fi gri după ce textul se termină. Dar pentru o marcare statică, acest lucru ar funcționa. –  > Por Michael Andersen.
  • div nu este permisă în cadrul pre –  > Por Markus Laire.
servitute de trecere

span este un element în linie. Veți avea nevoie de un element la nivel de bloc pentru a umple întreaga lățime.Inline versus bloc

Comentarii

  • Acest lucru nu este adevărat. Nu trebuie să colorați fundalul întregii linii. Vedeți alte răspunsuri. –  > Por ashleedawg.