CSS“文本溢出：省略号”并垂直居中元素答案

【问题标题】：CSS "text-overflow: ellipsis" and vertically center an elementCSS“文本溢出：省略号”并垂直居中元素
【发布时间】：2016-08-07 21:51:07
【问题描述】：

TL:DR;在底部。

我一直在寻找这个问题的答案大约 6 个小时，尝试不同的解决方案，使嵌套元素比以往任何时候都更深，只是试图弄清楚这一点。

我有一个响应式的 div，分别改变宽度和高度。在其中，我有 4 个要均匀显示的 div。在这样做的过程中，我制作了每个height:25%; display:table;，并在其中创建了一个带有display:table-cell; vertical-align:middle; 的<p> 元素。它工作得很好，但我想给它添加text-overflow:ellipsis; white-space:nowrap; overflow:hidden;。看来我只是不能两全其美。要垂直对齐它，它必须是display:table;。要给它text-overflow:ellipsis，它必须是display:block; 或display:inline-block;。如何仅通过 CSS 实现这两种效果？

为了确保该解决方案适用于我的情况，我写了一个几乎完全一样的示例，说明我在 http://codepen.io/anon/pen/PNeqMM 所拥有的内容。

.content {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.wholepost {
  background-color: #ffff00;
  border: 1px solid #000;
  position: relative;
  width: 100%;
  height: auto;
  display: table;
  /*Displayed as table to vertically align other (unrelated) DIVs */
}
/*otherdiv contains image that set's DIV height*/

.otherdiv {
  width: 22%;
  height: auto;
}
.imagecontainer {
  width: 90%;
  height: auto;
  padding: 5%;
}
.imagecontainer img {
  width: 100%;
  height: auto;
}
.textcontainer {
  position: absolute;
  width: 55%;
  box-sizing: border-box;
  padding-right: 200px;
  /*Note that I would like the text to cut off when it hits the start of the padding instead of the end */
  white-space: nowrap;
  overflow: hidden;
  margin-left: 22%;
  padding-left: 2%;
  left: 0;
  top: 5%;
  height: 90%;
  background-color: rgba(0, 0, 0, 0.4);
}
.diva,
.divb,
.divc,
.divd {
  height: 25%;
  display: table;
  width: 50%;
}
.diva p,
.divb p,
.divc p,
.divd p {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}

<body>
  <div class="content">
    <div class="wholepost">
      <div class="otherdiv">
        <div class="imagecontainer">
          <img src="http://www.pinevalleyfoods.com/wp-content/blogs.dir/26/files/2014/02/sample-image-square-300x300.jpg" </div>
        </div>
        <div class="textcontainer">

          <div class="diva">
            <p>This is some text in DIV 1A(it fits)</p>
          </div>


          <div class="divb">
            <p>This is a link in DIV B. One of the divs contains another paragraph. As you can see this does not fit. I want it to be ellipsed
            </p>
          </div>

          <div class="divc">
            <p>And to show an example of the third div I will use a paragraph that also doesn't fit in the DIV. I would like this to be ellipsed as well.</p>
          </div>

          <div class="divd">
            <p>But the fourth DIV fits nicely.</p>
          </div>

        </div>
      </div>
    </div>
</body>

TL:DR;如何将text-overflow:ellipsis; 应用于使用display:table-cell; vertical-align:middle; 居中且父元素设置为display:table; 的元素？使用另一种垂直对齐文本的方式也可以。

【问题讨论】：

这是您需要的吗？ codepen.io/anon/pen/KzRdvm
....我只需要表格布局：固定？当我说 6 小时时，我没有夸大其词。谢谢，正是我需要的！我不知道为什么我在网上找不到。
这可能是真的，请参阅下面的详细答案。顺便说一句，我认为你也有一些标记错误需要修复。
太棒了！谢谢你。至于标记错误，我看到一个没有关闭图像标签的标记错误，这只是在我的示例中，而不是实际站点。他们还有其他人吗？
在那个 img 标签的最后一行，那个
不应该在那里。我认为它在最底部缺少一个，所以移动那个应该很好。

标签： html css vertical-alignment css-tables ellipsis

【解决方案1】：

CSS ellipsis 与表格配合使用的关键是设置table-layout: fixed，而固定表格布局，还需要定义width，否则无法正常工作。看这个简单的例子：

.table {
  width: 100%;
  height: 100px;
  outline: 1px solid;
  display: table;
  table-layout: fixed;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="table">
  <div class="table-cell">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean</div>
</div>

除了table，你还可以使用flexbox：

.flexbox {
  height: 100px;
  outline: 1px solid;
  display: flex;
  align-items: center;
}
.flexbox-item {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="flexbox">
  <div class="flexbox-item">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean</div>
</div>

【讨论】：