Home > Web Front-end > CSS Tutorial > Can Text Be Aligned to a Slanted Line in IE9 ?

Can Text Be Aligned to a Slanted Line in IE9 ?

Barbara Streisand
Release: 2024-11-02 03:17:30
Original
443 people have browsed it

Can Text Be Aligned to a Slanted Line in IE9 ?

Align Text on Slanted Lines

Question:

Is it feasible to align text to the left on a slanted line, ensuring compatibility with IE9 and above?

Considerations:

  • The alignment must follow the angle of the slanted line.

Example Code:

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}

<div>
  <img src="http://placehold.it/150x250&amp;text=img" alt="image" />
  <p>Lorem ipsum dolor sit amet...</p>
</div>
Copy after login

Answer:

Using LESS

To circumvent browser limitations, a customized solution utilizes LESS:

<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

HTML:

<code class="html"><p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum dolor sit amet...
</p></code>
Copy after login

Proof of Concept:

See the working solution at: https://codepen.io/Tymek/pen/jEypOX?editors=110

The above is the detailed content of Can Text Be Aligned to a Slanted Line in IE9 ?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template