Question

我有以下css属性：

.sigSign { 
  display:table; 
  position:absolute; 
  border:1px solid #2ECC71; 
  outline:0; 
  text-align:center; 
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap;  
}
.sigSign div {  
  display: table-cell; 
  vertical-align: middle; 
  text-align:center; 
}

我有以下内容：

<div class="sigSign" style="width: 50px;height: 32px;">something really long in here</div>
<div class="sigSign" style="width: 50px;height: 32px;">short text</div>

两个元素的宽度都是50px，因为里面的文本，一个元素比另一个元素大得多。我做display:table-cell的原因是我可以进行垂直对齐，因为元素的高度总是在变化。

有没有办法让元素具有相同的宽度，如果文本超出宽度并且仍然使用表属性，那么只有省略号？

这是一个jsfiddle，以便您可以看到我在说什么。

Answer 1

小孩div失踪了

HTML

<div class="sigSign" style="width: 50px;height: 32px;">
    <div>something really long in here</div>
</div>

在“表格”table-layout: fixed;

上添加div

CSS

.sigSign {
    display: table;
    position: absolute;
    border: 1px solid #2ECC71;
    outline: 0;
    text-align: center;
    table-layout: fixed;
}
.sigSign div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}

检查此fiddle

Answer 2

请参阅CSS text-overflow in a table cell?和Why doesn't CSS ellipsis work in table cell?。

除此之外，flexbox还支持文本溢出省略号，以及水平和垂直居中的项目。

.sigSign {
  display: flex; /*flex*/
  justify-content: center; /*horizonal center*/
  align-items: center; /*vertical center*/
  border: 1px solid green;
  width: 150px;
  height: 50px;
}
.sigSign > div {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="sigSign"><div>something really long in here</div></div>
<br />
<div class="sigSign"><div>short text</div></div>

由于容器是已知的宽度和高度，因此您可以使用伪元素作为垂直中心作业。不需要内部div。浏览器支持IE8 +。

.sigSign {
  border: 1px solid green;
  width: 150px;
  height: 50px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.sigSign:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

<div class="sigSign">something really long in here</div>
<br />
<div class="sigSign">short text</div>

Answer 3

就像每个人都说的那样，第二个规则集没有匿名div，因此我将两个规则集合起来。现在两个div都是50px宽，无论内容如何，省略号都可以正常运行。

https://jsfiddle.net/zer00ne/xhs0y3n7/

.sigSign {
  display: table-cell;
  position: absolute;
  border: 1px solid #2ECC71;
  outline: 0;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}

您的CSS类似于此article中发布的David Walsh的代码段。

  .dataTable td {
    /* essential */
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;

    /* for good looks */
    padding: 10px;
}

请注意，他使用了真实的td，因此您可以按照与他相同的方式思考。

DIV显示：表格单元格和文本溢出：省略号

3 个答案:

HTML

CSS