1

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

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

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

  1. 文本的中间必须与 div 的中间对齐。
  2. 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>

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

因此，用户可能会在列表中看到类似这样的结果之一。（“...”不是必需的，此处显示以进行说明）：

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

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

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

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

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

谢谢！

穆罕默德

4

2 回答 2

3 
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>
于 2013-05-12T09:26:05.277 回答
0

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

于 2013-05-11T16:06:42.747 回答