Question

我在stackoverflow上发现了几个与此问题相关的问题，但是我的一些独特之处并没有找到解决方案。我也不是css专家，去看看。

我的情况如下：我在div中有一个字符串，必须使用以下约束显示：

使用以下字符串作为示例： “快速的棕色狐狸一次又一次地跳过懒狗。”

文本的中间必须在div的中间对齐。
Div可以100％宽，但必须限制为一行。如果窗口太小，文本的截断应该在任何一侧发生，但文本的中心必须始终可见。例如，如果窗口太小，div内容可能是：“over the”，其余部分被截断，依此类推。

什么CSS可以帮我实现这个目标？我试过以下无济于事：

<html>
<head>
<style type='text/css' >
    div {
        width:100%;
        border:solid 1px black;
        text-align: center;
        vertical-align:middle;
        display: table-cell;
        white-space:nowrap;
        overflow:hidden;
    }
</style>
</head>
<body>
<div>
The quick brown fox jumps over the lazy dogs, again and again as well too.
</div>
</body>
</html>

这里的动机是我正在尝试创建一个移动网络应用程序，它将在列表中显示一些搜索结果。搜索文本将始终是高亮的，我想确保它始终在列表中可见。因此，如果搜索查询是“懒狗”，我无法将整个搜索结果放在一行中，所以我需要将它放在一个100％宽的div中，中间显示“懒狗”，多余文本被截断。

因此，用户可能会将此类内容视为列表中的结果之一。（“......”不是必需的，此处显示为澄清）：

...... 懒狗，再次......

此外，当用户在横向和纵向之间切换设备方向时，列表项应该优雅地扩展并显示更多文本。

我确信有一种优雅的CSS方式可以做到这一点，而不是我正在考虑的凌乱的javascript路线。

如果我能提供任何澄清或是否有其他方法可以实现我想要做的事情，请告诉我。或者这可能不是一个好的UI设计选择？

一如既往，非常感谢任何帮助！

谢谢！

穆罕默德

Answer 1

div {
    margin:0 -50% 0 -50%;
    text-align: center;
    border: 1px solid black;
    overflow: hidden;
    width: 100%;
    position:relative;
    left: 50%;
}
span {
    width: 100%;
 overflow:hidden;
    position:relative;
    margin: 0 -50%;
 white-space:nowrap;

}

使用以下html：

<div>
<span>The quick brown fox jumps over the lazy dogs, again and again as well too.</span>
</div>

Answer 2

试试#id-of-div { width: auto; } body { text-align: center; overflow-x: hidden; } 我不是完全确定你的意思，或者它是否有效，但无论如何都要尝试。

动态div以文本中间为中心

2 个答案: