Question

是否可以将两个div包裹起来，就像它们的一行一样？

<div class="multiLine">
<div class="topLine"></div>
<div class="bottomLine"><div>
</div>

所以，如果顶线全部是“A”，而底线全部是“B”，我们会看到它像

一样

AAAAAAAAA
BBBBBBBBB
AAAAAAAAA
BBBBBBBBB

我正在尝试使用JavaScript，jQuery和css3完成此任务。

Answer 1

这实际上可以通过使用CSS并使用div位置和线高来实现。

例如：

.multiLine {
    position:relative;
    width:100px;
    eight:100px;
}

.topLine {
    position:absolute;
    word-break:break-all;
    line-height:40px;
    top:20px;
}

.bottomLine {
    position:absolute;
    word-break:break-all;
    line-height:40px;
}

虽然它可能不是您想要的最佳解决方案，但这可行。这取决于上下文以及您希望通过此效果实现的目标。

编辑：您可以在此处查看示例：http://jsfiddle.net/78f94/

Answer 2

你不能单独使用html / css。但是使用Javascript，您可以找到视口宽度，截断字符串并将其作为内容添加到新的内部div。当您调整宽度变化时，这可能会变得非常复杂！

以下是有关获取视口宽度的更多信息：Get the browser viewport dimensions with JavaScript

自定义div包含的位置

2 个答案: