< span>缩进包装文本 [英] <span> indent wrapped text

问题描述

所以我模拟一个表格布局与一个div和一对夫妇跨越里面。我想要右边的span来缩进任何包装的文本。我试过几件事情，不能让它工作。任何帮助将不胜感激。

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

HTML

 < div class = display-element> 
< span class =display-label>栏位1< / span> 
< span class =display-field>这是我的数据字符串，有时它很长。有时它不是。这是。< / span> 
< / div> 
< div class =display-element> 
< span class =display-label>栏位2< / span> 
< span class =display-field>这是另一个数据字符串。< / span> 
< / div> 
  

CSS

  .display-element {} 
 
 .display-label {display：inline-block; 
 width：100px; 
 padding-left：5px;} 
 
 .display-field {display：inline;} 
  

解决方案

查看： 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; / *仅供测试* /}  

 < div class =display-element> < span class =display-label>栏位1< / span> < span class =display-field>这是我的数据字符串，有时它很长。有时它不是。这一个是。< / span>< / div>< div class =display-element> < span class =display-label>栏位2< / span> < / span>< / div>  

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

解决方案

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>

这篇关于< span>缩进包装文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！