Schräger linker Einzug bei Text

[jackotrades]

Hallo,

gibt es eine elegantere Lösung für einen schrägen linken Texteinzug ohne mit 'text-indent' jede Teile einzeln zu verschieben?

Mir fiele nur so was ein:

<p>
 <div style="text-indent:70px;">Lorem ipsum dolor sit amet, </div>
 <div style="text-indent:60px;">sed eiusmod tempor incidunt </div>
 <div style="text-indent:50px;">aliqua. Ut enim ad minim veniam, </div>
 <div style="text-indent:40px;">ullamco laboris nisi ut aliquid </div>
 <div style="text-indent:30px;">Quis aute iure reprehenderit </div>
 <div style="text-indent:20px;">dolore eu fugiat nulla pariatur. </div>
 <div style="text-indent:10px;">cupiditat non proident, sunt in </div>
 mollit anim id est laborum.</p>

… und das ist bei längeren Texten doch eher unschön und unfexibel.

Gruß,
Jackotrades

[Cheatah]

Hi,

gibt es eine elegantere Lösung für einen schrägen linken Texteinzug ohne mit 'text-indent' jede Teile einzeln zu verschieben?

ja, aber nur im IE.

Cheatah, SCNR

[Detlef G.]

Hallo Jackotrades

gibt es eine elegantere Lösung für einen schrägen linken Texteinzug ohne mit 'text-indent' jede Teile einzeln zu verschieben?

Mir fiele nur so was ein:

<p>
<div style="text-indent:70px;">Lorem ipsum dolor sit amet, </div>
<div style="text-indent:60px;">sed eiusmod tempor incidunt </div>
<div style="text-indent:50px;">aliqua. Ut enim ad minim veniam, </div>
<div style="text-indent:40px;">ullamco laboris nisi ut aliquid </div>
<div style="text-indent:30px;">Quis aute iure reprehenderit </div>
<div style="text-indent:20px;">dolore eu fugiat nulla pariatur. </div>
<div style="text-indent:10px;">cupiditat non proident, sunt in </div>
mollit anim id est laborum.</p>

Das ist nicht nur nicht elegant sondern auch invalide. Ein p darf kein div enthalten.

Eine (auch nicht elegante) Möglichkeit könnte so aussehen:
CSS

p span {  
  display:block;  
  padding-left:10px;  
}  

HTML

 <p>  
   <span><span><span><span><span><span><span>Lorem ipsum dolor sit amet, </span>  
   sed eiusmod tempor incidunt </span>  
   aliqua. Ut enim ad minim veniam, </span>  
   ullamco laboris nisi ut aliquid </span>  
   Quis aute iure reprehenderit </span>  
   dolore eu fugiat nulla pariatur. </span>  
   cupiditat non proident, sunt in </span>  
   mollit anim id est laborum.  
 </p>  

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo,

oh, falscher Codeblock

HTML

 <p>  
   <span><span><span><span><span><span><span>Lorem ipsum dolor sit amet, </span>  
   sed eiusmod tempor incidunt </span>  
   aliqua. Ut enim ad minim veniam, </span>  
   ullamco laboris nisi ut aliquid </span>  
   Quis aute iure reprehenderit </span>  
   dolore eu fugiat nulla pariatur. </span>  
   cupiditat non proident, sunt in </span>  
   mollit anim id est laborum.  
  </p>  

Auf Wiederlesen
Detlef