Comment obtenir un texte aligné à gauche sur une ligne inclinée dans tous les navigateurs ?

Alignement du texte sur des lignes inclinées

Arrière-plan

L'obtention d'un texte aligné à gauche sur une ligne inclinée peut poser un défi, en particulier lors de la recherche sur plusieurs navigateurs. compatibilité (retour à IE9).

Solution utilisant LESS

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

<code class="less">.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;
}</code>

HTML

En HTML, nous incorporons ces éléments comme suit :

<code class="html"><p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  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.
</p></code>

Conclusion

Cette solution basée sur LESS fournit une approche compatible avec tous les navigateurs pour obtenir un alignement à gauche texte sur une ligne inclinée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!