Reputation: 2990

CSS alignment of a text

Quick points, having trouble aligning a text in a table as it wraps the second line. I have treid justifying and block and in-line etc Appreciate any suggestions. What I need is that the second line aligns exactly under the first line eg: starts at vfdbd....

Upvotes: 1

Answers (4)

Afshin Ghazi

Reputation: 2990

Ended up increasing line-height to make it work.

Upvotes: 0

FelipeAls

Reputation: 22171

No need for an extra element if you know the width of the symbol (text or image) you're adding to the left of your first line.

The trick is to add a negative text-indent counter-balanced by a positive margin-left. Say you add a 40px-wide internet kitten via :pseudo + 8px of padding between image and text: the element then needs following first CSS rule:

/* Image is 40px-wide and we want it at 8px from text */
.txt-indent {
  margin-left: 48px;
  text-indent: -48px;
}
.txt-indent:before {
  content: url(https://placekitten.com/40/40);
  padding-right: 8px;
}
body {
  width: 200px;
  line-height: 1.5;
}

<p class="txt-indent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, natus soluta! Itaque, corporis veritatis quisquam ut debitis sed incidunt enim sit ratione sint repellat aliquid sunt rerum commodi asperiores ipsa!</p>

Upvotes: 1

Stefan Vilbrandt

Reputation: 292

put the text inside a span element with display: inline-block;. That way the text start on the same line.

Upvotes: 2

Tamilmani Purushothaman

Reputation: 59

The wrapper needs to have text justification applied via CSS:

text-align:justify;
text-justify:inter-word;

In general, browsers do a crappy job as fully-justified text compared to "typesetting" applications for print. In general, full-justification on browsers makes text HARDER to read and should generally be avoided.

Upvotes: 1

CSS alignment of a text

Answers (4)

Related Questions