Can text be left-aligned along a slanted line in IE9 ?-CSS Tutorial-php.cn

Can text be left-aligned along a slanted line in IE9 ?

Mary-Kate Olsen

Release： 2024-11-01 17:58:02

Original

391 people have browsed it

Can text be left-aligned along a slanted line in IE9 ?

Align Text on Slanted Line

Can text be left aligned along a slanted line? The alignment should conform to the slanted shape, compatible with IE9 browsers.

Consider this code sample:

<code class="html"><img src="http://placehold.it/150x250&text=img" alt="image" />
<p>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>

Copy after login

<code class="css">img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}</code>

Copy after login

Solution: Using LESS

Complementing the standard CSS approach, a more unconventional solution involves adding square elements and calculating their size:

<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>

Copy after login

With HTML as follows:

<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>

Copy after login

Proof of concept:

Here's a live example to demonstrate the solution in action: http://codepen.io/Tymek/pen/jEypOX?editors=110

The above is the detailed content of Can text be left-aligned along a slanted line in IE9 ?. For more information, please follow other related articles on the PHP Chinese website!