CSS "text-overflow: ellipsis" 并垂直居中一个元素

Question

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; 的元素？使用另一种垂直对齐文本的方法也可以。

Answer 1

使CSS省略号与table一起工作的关键是设置table-layout: fixed，而对于固定的table布局，您还需要定义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>

CSS "text-overflow: ellipsis" 并垂直居中一个元素

CSS "text-overflow: ellipsis" and vertically center an element

html

css

vertical-alignment

css-tables

ellipsis