Question

我正在尝试创建一个简单的元素，如下面的

<span class='title'>Title</span>
<span class='content'>lots of texts here</span>

在浏览器中显示如下

这里的文字标题...... Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一台未知的打印机采用了类型的厨房，并将其拼凑成一本类型的样本。它不仅存在了五个世纪，而且还延续了电子排版，基本保持不变。它在20世纪60年代推出了包含Lorem Ipsum段落的Letraset表格，最近还发布了包括Lorem Ipsum版本在内的桌面出版软件Aldus PageMaker。

我希望显示

Titlelosts of texts here......Lorem Ipsum is simply dummy text of the printing and typesetting    
     industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,    
     when an unknown printer took a galley of type and scrambled it to make a type specimen    
     book. It has survived not only five centuries, but also the leap into electronic   
     typesetting, remaining essentially unchanged. It was popularised in the 1960s with the   
     release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

所以我可以清楚地看到标题，但我无法改变元素（所以它仍然是两个跨度）。

有可能吗？

非常感谢！

Answer 1

将text-indent: -100px;与padding: 0 100px;结合使用可获得您想要的结果（尽管如此，您必须设置div）。

例如： http://jsfiddle.net/skeurentjes/yFmfx/1/

Answer 2

您可以将标题浮动到内容的左侧，并设置内容的padding-left 但两个跨度都必须是display: block：

.title, .content {
    display: block;
}

.title {
    float:left;
}

.content {
    padding-left: 30px; /*The higher the padding, the more it will be apart the title */
}

它会产生你描述的效果：http://jsfiddle.net/5e8r4/1/
如果你想打破一条线并保持身份，只需删除float:left

Answer 3

将所有内容放在一个div中。我称之为文本块。

DEMO HERE

.textblock {
margin-left:50px;
text-indent:-50px;
}

Answer 4

您可以使用display inline-block。有了这个，你可以把边缘填充。

像这样：

.content{
    display:inline-block;
    padding-left: 5px;
}

如何在我的代码中为元素创建填充？

4 个答案: