<span>缩进换行文本
<span>缩进换行文本
提问于 2011-10-04 02:15:29
所以我正在模拟一个表格布局，里面有一个div和几个span。我想让右边的跨度缩进任何换行的文本。我尝试了几种方法，但都不能正常工作。任何帮助都将不胜感激。
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;}回答 2
Stack Overflow用户
发布于 2011-10-04 02:28:25
听起来你想要一个悬空缩进。像这样的CSS应该可以做到这一点：
.hanging-indent
{
text-indent : -3em ;
margin-left : 3em ;
}但是由于您的文本是一个内联元素，所以<span> -indent属性以及与块相关的其他CSS属性是没有意义的。
Stack Overflow用户
发布于 2015-04-21 13:55:43
CSS 3 draft specifies a hanging indent。如果浏览器支持，则应执行以下操作：
.hanging-indent
{
text-indent: 3em hanging each-line;
}不幸的是，hanging和each-line的值都不是currently supported in modern browsers，因为CSS Text Module Level 3的规范仍处于草案阶段。
该功能是使用特定于浏览器的WebKit和Chromium前缀实现的。为了Firefox there is an open Bug you may vote on。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7638970
复制相关文章
相似问题