<Span> Indent Wrapped Text

span indent wrapped text

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>

CSS property text-indent not working with html span element

text-indent doesn't work on inline elements. <span> defaults to being inline. You need to change it so it works as an inline block:

display:inline-block;

How do you indent subsequent lines of text using span

Here is a solution widthout changing your HTML structure:

Demo

CSS:

.messageContainer {
    display: table;
    table-layout:fixed;
}
.time {
    display:table-cell;
    width:70px;
    vertical-align:top;
}
.nickname {
    display:table-cell;
    width:70px;
    vertical-align:top;
}
.message {
    display:inline-block;
    text-indent:70px;
    margin-left:-70px;
}

HTML:

<div class="messageContainer">
    <span class="time">10:00</span>
    <span class="nickname">Tom:</span>
    <span class="message">test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message </span>
</div>

Text indent a wrapped inline-block span

I was able to come up with something close, with two possible drawbacks. One issue with this approach is that the first span must be wider than the indent amount or the wrapping doesn't work exactly as expected. The other is that the background-color does not extend to the left of the indented element:

The trick is to have a margin-left on the 2nd span and to have an offsetting negative margin-right on the first:

.span1 {
    background-color: green;
    margin-right: -5rem;
}
.span2 {
    background-color: blue;
    margin-left: 5rem;
}

http://jsfiddle.net/6ynjybdw/4

Wrap or Hang Indent a secondary span

Fixed: http://jsfiddle.net/XceSq/1/

<div style="display:inline-block;"><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></div>
<div style="display:inline-block;"><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></div>​

The span element is a textual container and does not support the width requirement you are aiming to achieve. The div element, however, is a layout container which will allow you to contain the two objects within a single block. Using display:inline-block, we're able to make sure that the two containers show up side by side.

Enjoy and good luck!

How to make span text wrap nicely below start of first line

And don't forget the overflow:hidden trick:

.status-label {  float:left; padding-right:10px;}.status-text {  overflow:hidden; display:block;}

<div class="status-container">  <span class="status-label">Status:</span>  <span class="status-text">This is some rather long text that I would like to the second line of text to start at the same horizontal position as the first line. At the moment it wraps beneath the 'status:' label which is annoying</span></div>

CSS second-line indent not working

If the element is inline it will indent the first line, otherwise if it's a block element it will indent the rest of the lines, which is just like Briguy37 said, since that's the difference between DIV and SPAN.
I just wanted to clear out that it's not a "problem with span".

---

Related Topics