使用省略号垂直对齐div内的文本

Question

我有一个带有跨度和 img 的 div。 跨度和图像都假设垂直对齐。

<div class="container">
    <img src="test.png">
  <span class="inner">this line can be 2-3 line with ellipsis</span>
  </div>

.container {
  height: 72px;
  width: 250px;
}
.test {
  height: 64px;
  width:64px;
}

img 需要在左边，文本在它旁边。 不能让它工作！

Answer 1

您可以使用display: table-cell和vertical-align: middle属性使其工作：

.container {
  display: table;
}
.inner {
  height: 64px;
  width:64px;
  padding-left: 20px;
  display: inline-block;
}

.container img, .container .inner { display: table-cell; vertical-align: middle;}

在这里摆弄

Answer 2

要并排vertical-align 2 个元素，它们需要显示有一个内联框。

或者他们需要充当table-cell ，或者是 flexbox 的孩子。

img 不会采用display-table-cell; 和display:flex使用img可能很棘手，让我们使用inline-block 。

对于省略号， white-space ， text-overflow和overflow将一起使用。 在这里使用inline-block ，我们还需要给出一个width 。

 .container { height: 72px; width: 250px; text-align: center; } img { vertical-align: middle; } .test { height: 64px; width: 64px; } .inner { width: 180px; display: inline-block; white-space: pre; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; }

 <div class="container"> <img src="http://dummyimage.com/64x64&text=test.png"> <span class="inner">this line can be 2-3 line with ellipsis</span> </div> <div class="container"> <img src="http://dummyimage.com/64x64&text=test.png"> <span class="inner">this line can be 2-3 line with ellipsis this line can be 2nd line with ellipsis</span> </div> <div class="container"> <img src="http://dummyimage.com/64x64&text=test.png"> <span class="inner">this line can be 2-3 line with ellipsis this line can be 2nd line with ellipsis this line can be the third line with ellipsis</span> </div>

要在几行上激活省略号，您需要使用white-space:pre; 或<pre>标记并在 HTML 代码中进行换行。 text-overflow:ellipsis; 通常用于单行并且不会在换行文本中使用并且仅显示在框的底部。

Answer 3

这可以通过使用 float 属性来工作

<div class="container">
    <img src="test.png">
  <span class="inner">this line can be 2-3 line with ellipsis</span>
  </div>
.container {
  height: 72px;
  width: 250px;
}
.container img{
  float:left;
}
.inner {
  height: 64px;
  width:64px;
  float:left;
  padding-left:10px;
}

提琴手

Answer 4

试试这个，它对我有用。 这绝对适合您，我们必须使用 css 属性 1.-webkit-line-clamp 和 2.-webkit-box-orient

 .container { width: 300px; border: 1px solid #e7e7e7; border-radius: 4px; padding: 1rem; } .text-truncate-vertical { text-align: left; display: -webkit-box; -webkit-line-clamp: 4; /*define how many line you want to show */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

 <div class="container"> <p class="text-truncate-vertical">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p> </div>