Question

我有一些文字我希望被定位在持有人中，如下所示：

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

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

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

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

我希望每一个跨度都在新的一条线上，这就是破坏它的地方。目前，跨度只是坐在同一条线上。我尝试在第一个跨度之后添加<br>但是也没有修复它，这次第二个跨度稍微低于但位于右侧。

我正在使用的CSS：

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

Answer 4

尝试删除float：left;从

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

Answer 5

使用css word-break

分隔行

点击此处查看结果 http://gucoders.com/css3/css_wordbreak.php

使用css在单独的行上跨文本

5 个答案: