1

我有一些文本要放置在支架内，如下所示：

[...........]
[.the]......]
[.[title]...]
[...........]

持有人需要有黑色背景，我希望文本有白色背景和黑色文本。我正在使用以下结构：

<div class="holder">
    <div class="title">
        <span>The</span>
        <span>Title</span>
    </div>
</div>

我不确定它是否正确，但我使用的是<span>s过度，<p>s因为 p 是支架的全宽，而跨度的宽度本身就是文本本身。

我希望每个跨度都在一个新行上，这就是它破坏 atm 的地方。目前，跨度只是一起坐在同一条线上。我尝试<br>在第一个跨度之后添加一个，但这也不能解决它，这次第二个跨度略低于但位于右侧。

我正在使用的CSS：

.holder {
    width: 200px;
    height: 300px;
}

.title span {
    background: #fff;
    color: #000;
    float: left;
    display: block;
    padding: 2px;
}
4

5 回答 5

2

您不应该为此使用 float 。此外，创建 span 以跨越行中间的文本。

这就是你想要做的：http: //jsfiddle.net/Rhjtv/？

于 2012-09-08T11:11:53.047 回答
1

尝试clear:both;为您的跨度添加样式声明。

如果这不能解决您的问题，请在http://www.jsfiddle.net上构建一个示例，以便 wie 可以更好地了解问题所在。

于 2012-09-08T11:08:02.323 回答
1

如果您希望您的线路一个接一个，您应该使用 div

于 2012-09-08T11:13:07.900 回答
0

尝试删除 float:left; 从

.title span {
    background: #fff;
    color: #000;
    float: left;
    display: block;
    padding: 2px;
}
于 2012-09-08T11:14:59.177 回答
-1

使用 css word-break 分隔行

点击这里查看结果 http://gucoders.com/css3/css_wordbreak.php

于 2014-12-10T05:14:15.863 回答