Question

将div中的文本居中的常见技巧是：

.center-div {
    display:table-cell;
    vertical-align: middle;
}

问题是我div中的文本是一些长度可变的字符串，我希望容器能够修复高度和宽度。但是，将上面的CSS更改为：

.center-div {
    display:table-cell;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    text-overflow: ellipsis;
}

由于它是一个表格单元格，它只是改变div的高度而不是溢出。因为我的文本将是一个多行文本，所以行高技巧不会起作用。我有没有办法让文本居中并能够同时溢出？

P.S。首选CSS答案。内容将由angularjs呈现，并且无法知道呈现何时完成。如果绝对需要javascript，请说明我可以将它与angularjs一起使用的方法。（ng-repeat，具体而言）

Answer 1

文字将垂直居中，高度和宽度固定。 word-wrap:break-word;已添加到span

div.center-div
{
    display: table;
    table-layout:fixed;
    margin:0 auto;
}

div.center-div span
{
    display:table-cell;
    max-width:300px;
    height:100px;
    vertical-align:middle;
  background :red;
text-align:center;  
 word-wrap:break-word;
}

HTML

<div class="center-div">
     <span>
          hi
     </span>
</div>

http://jsbin.com/kixizehuhu/3/edit

Answer 2

如果你的文字将被放入一个固定宽度和高度的div中，你可以简单地使用它：

＆＃13;

.center-div {
  width: 100px;
  height: 100px;
  position: relative;
  text-align: center;
  border: 1px solid #333;
}
.content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  max-height: 100px;
  overflow: auto;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

＆＃13;

<div class="center-div">
  <div class="content">Lorem ipsum dolor sit amet, consectetur.</div>
</div>

＆＃13;

<强> CSS：

.center-div {
   width: 100px;
   height: 100px;
   position: relative;
}
.content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    max-height: 100px;
    overflow: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

CodePen Preview Link

请注意，text-overflow: ellipsis仅适用于单行文字的white-space: nowrap;。

Answer 3

text-overflow:ellipsis不适用于多行文字。有一些css-only workarounds that have very poor browser support。如果您想要它可以工作，您可以查看一些JavaScript solutions。

无论如何，至于对文本进行居中，我建议添加一个容器并使用line-height: 100px为其，display: inline-block和max-height:100px为内容：

http://jsfiddle.net/ilpo/jwcyfwpw/

Answer 4

我认为你必须在div中放置一个元素来携带文本，使其溢出，并使其垂直居中，并且div容器处理大小

类似的东西：

HTML：

<div class="center-div-content">
    <div class="center-div">
        this a long long long long long long long long long long long long text
    </div>
</div>

CSS：

.center-div-content{    
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
}

.center-div {
    position: absolute;
    width: 100%;    
    top: 50%;
    text-align: center; //if you want center horizontal too

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

在此FIDDEL中，您可以看到文字如何更改其长度并且它仍然对齐并溢出

http://jsfiddle.net/Yandy_Viera/qnmm1Lm5/1/

Answer 5

好的，我想这就是你想要的？在文字周围添加X[1, 2].dot(Y[3])

http://jsfiddle.net/ct9ey95k/1/

尝试添加更多内容或删除文字，看看是否符合您的需要？

Answer 6

不确定这是否正是您想要的，但我使用这个技巧：

CSS：

.outer {
     overflow-x: hidden;
     overflow-y: auto;
     text-align: center;
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}
.outer:after {
     content: "\a0 ";
     position: relative;
     display: inline-block;
     vertical-align: middle;
     top: 0px;
     left: 0px;
     width: 0px;
     height: 100%;
}
.inner {
     display: inline-block;
     vertical-align: middle;
     width: 70%;
     min-height: 100px;
     background: red;
}

HTML

<div class="outer">
  <div class="inner">
    Your Text ....
  </div>
</div>

Jsbin：http://jsbin.com/duwuzogodo/1/edit

现在，内层在外层中垂直和水平居中（在此示例中已固定）。现在，如果内层中的文本变得太大，它可能会溢出，您可以滚动它。 Imho这比使用table-cell hack更好。另外，不需要脚本。

Answer 7

试试这个..

<强> HTML

<div class="center-div">
  <div class="content">text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here</div>
</div>

<强>的CSS

    .center-div {
    display:table-cell;
    vertical-align: middle;
    width: 100px;    
    text-overflow: ellipsis;
    border:1px solid red;    
}
.content {       
    height: 100px;
    overflow: auto;
}

Fiddle Demo

有没有办法垂直中心可变长度文本与修复高度容器？

7 个答案: