3

我试图让文本在一个固定的 div 内居中，这将允许溢出，但我似乎无法让它在 div 内居中。

我做了一个 jsfiddle 来告诉你我的意思：http: //jsfiddle.net/mdHKZ/3/

问题是一旦文本开始溢出 div，它将不再居中。但是，我无法扩展 div，因为这会破坏我拥有固定宽度 div 的目的。有什么办法可以实现我想要做的事情吗？

4

3 回答 3

4

我认为不可能使用直接的 css 动态地执行此操作，但如果您提前知道文本的宽度，则可以在内容上指定负边距：jsFiddle

如果您想动态地执行此操作（即让文本居中在一个小 div 中，适用于任何宽度的文本），我认为您必须使用 javascript。

编辑：这是使用 jQuery 设置边距的更新 jsFiddle：jsFiddle

HTML：

<div class="contents">
    <span id="hack">Sample Text Sample Text Sample Text</span>
</div>

jQuery：

var $hack = $('#hack');
var innerWidth = $hack.width();
var outerWidth = $hack.parent().width();
if(innerWidth > outerWidth) {
    var marginLeft = -1 * (innerWidth - outerWidth)/2;
    $hack.css('margin-left', marginLeft);
}

CSS：

.contents {
  margin-left: 150px;
  text-align: center;
  width: 100px;
  white-space: nowrap;
  border: 1px solid;
  margin-bottom: 20px;
}
于 2012-08-06T17:16:42.683 回答
0

你知道里面的div的宽度是多少吗？我不确定您是否能够根据可变宽度自动执行此操作。我能够以静态宽度居中：

<div style="margin-left: 150px; text-align: center; width: 100px; overflow: visible; white-space: nowrap; border: 1px solid; margin-bottom: 20px;">
    <div style="width:200px;margin-left:-100px;">Sample Text Sample Text SamText Sampl eple </div>
</div>

我必须将宽度设置为 200px，然后用左边距减去一半。我无法让它与更通用的东西一起使用，比如“margin-left：50%”，因为它只会从外部 div 向左移动 -75px（150px 的一半）

于 2012-08-06T17:22:55.883 回答
0

将溢出更改为“自动”而不是“可见”

于 2012-08-06T16:52:12.040 回答