Question

TL：DR;在底部。

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

我有一个响应的div，分别改变宽度和高度。在其中，我有4个div，我想要均匀显示。在这样做的过程中，我创建了每个height:25%; display:table;，并在其中创建了一个<p>元素display:table-cell; vertical-align:middle;。它工作得很好，但我想在其中添加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-layout: fixed，并且使用固定的表格布局，您还需要定义width，否则它将无法正常工作。看到这个简单的例子：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

除了table之外，您还可以使用flexbox：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: