Question

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

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

Fiddle here

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

JsFiddle

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>

div中的垂直对齐文本与省略号

4 个答案: