] ]

Alignement du texte sur les lignes inclinées

arrière-plan

Atteindre le texte aligné gauche sur une ligne inclinée peut poser un défi, particulièrement lorsque Séréta. Compatibilité (Retour à IE9).

Solution utilisant lletion lless

En introduisant une série d'éléments carrés et en calculant leurs tailles, nous pouvons créer une solution efficace:

.loop(@i) when (@i > 0){
  .loop((@i - 1));
  .space@{i}{
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}
@hSize: 15px;
.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}

. .Lop ((@ i - 1)); .Space @ {i} { Largeur: plancher (@ i * @ hsize / (1 / tan (5deg))); } } @Hsize: 15px; .Space {espace Flottant: à gauche; Clear: à gauche; Largeur: @HSize; Hauteur: @HSize; }

html

  
  
  
  
  Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.

Lorem ipsum Dolor Sit Amet. VESTUBUM Commodo Voluta, Convales AC, Laoreet Enem. Phasellus fermentum dans, Dolor. Pelletesque facilisis. Nulla Imperdiet Sit Amet Magna. Vesttibum Dapibus, Mauris NEC Malesuada FAMES AFAMES AC TURPIS VALIT, Rhoncus EU, Lubtus et Interdum Adipsing Wisi. Alquam erat ac ipsum. Entier aliquum purus. QUISQUE LOREM TOROR FINGILLA SED, Vestibum ID, Eleifend Justo Vel Bibendum Sapien Massa AC Turpis Faucibus Orci Luctus non, Conseecteuer Lobortis Qui, Varus in, paragraphe.

Conclusion

Cette solution moins basée fournit une approche compatible entre les navigateurs croisés pour atteindre le texte aligné gauche sur une ligne inclinée.