Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<span> indent wrapped text

Tags:

So I'm simulating a table layout with a div and a couple spans inside it. I'd like the span on the right to indent any text that wraps. I've tried a few things and can't get it to work. Any help would be appreciated.

jsFiddle: http://jsfiddle.net/2Wbuv/

HTML

<div class="display-element">
    <span class="display-label">Field 1</span>
    <span class="display-field">This is my string of data, some times it is pretty long.  Sometimes it is not.  This one is.</span>
</div>
<div class="display-element">
    <span class="display-label">Field 2</span>
    <span class="display-field">This is another string of data.</span>
</div>

CSS

.display-element        {}

.display-label          {display: inline-block;
                         width: 100px;
                         padding-left: 5px;}

.display-field          {display: inline;}
like image 352
THE JOATMON Avatar asked Oct 03 '11 18:10

THE JOATMON


People also ask

How to indent CSS text?

Text-indent CSSIf the value is positive, the first line will be indented to the right. If the value is negative, the first line will be intended to the left. To set the text-indent property in CSS, you can use length values or percentages. Length values, like px, pt, and em, will define a fixed length of empty space.

How do you do a hanging indent in HTML?

Hanging Indent Method 1: HTML-OnlyThe style attribute value “padding-left: 36px” indents the entire paragraph by 36 pixels. And the style attribute value “text-indent: -36px” shifts the first line of the paragraph to the left by 36 pixels (hence the negative value of -36px).

What text-indent?

The text-indent property specifies the indentation of the first line in a text-block. Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

How do you indent the second line in CSS?

Method 2: By making the position relative to the first line, set the text-indent to -26px and padding-left value to 26px. Here in this example, we have made the position of the second line relative to the first line. So the second line is indented/aligned according to the first line.


1 Answers

Check this out: http://jsfiddle.net/2Wbuv/2/

.display-element {
}

.display-label {
  display: inline-block;
  width: 100px;
  padding-left: 5px;
}

.display-field {
  display: inline-block;
  padding-left: 50px;
  text-indent: -50px;
  vertical-align: top;
  width: 200px; /* for testing purposes only */
}
<div class="display-element">
  <span class="display-label">Field 1</span>
  <span class="display-field">This is my string of data, some times it is pretty long.  Sometimes it is not.  This one is.</span>
</div>
<div class="display-element">
  <span class="display-label">Field 2</span>
  <span class="display-field">This is another string of data.</span>
</div>
like image 129
simshaun Avatar answered Dec 02 '22 12:12

simshaun