行高的文本末尾有一个图标。如何在换行后正确显示？

Question

我尝试创建一个文本，在文本之后我想放置一个图标。图标高于文本，需要垂直居中。

我尝试了不同的东西，但由于文字可以超过2行，我遇到了问题。例如，我使用line-height =图标的高度，然后使用一些填充将图标作为背景图像放在右边。但是，一旦文本超过2行，这就不再适用了：

这是一个小提琴： https://jsfiddle.net/m1ten8Ld/

只要文字在一行上就完全适合：

但是一旦超过2行，它就不再起作用了：

任何人都知道如何解决这个问题？

Fiddlecode：

div {
  background-image: url('https://placeholdit.imgix.net/~text?txtsize=13&txt=150%C3%9750&w=150&h=50');
  background-repeat: no-repeat;
  background-position: right;
  line-height: 50px;
  padding-right: 150px;
  display: inline-block;
  height: 50px;
}

Answer 1

您可以通过伪:after

插入图片

＆＃13;

＆＃13;

div {
  padding-right: 150px;/* is it necessary ? */
  display: inline-block;
}
div:after {
  content: url('https://placeholdit.imgix.net/~text?txtsize=13&txt=150%C3%9750&w=150&h=50');
  display: inline-block;
  vertical-align: middle;
  margin-right: -150px;/* necessary if padding set earlier ? */
}

＆＃13;

<div>This is a Text and the Icon should always be here -></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

希望我理解你的问题。您可以使用CSS :before或:after选择器获得结果，如下所示。我建议你使用fontAwesome或类似的图标字体。

＆＃13;

＆＃13;

div {
  background-image: url('https://placeholdit.imgix.net/~text?txtsize=13&txt=150%C3%9750&w=150&h=50');
  background-repeat: no-repeat;
  background-position: right;
  line-height: 50px;
  padding-right: 150px;
  display: inline-block;
  height: 50px;
  position: relative;
}

div:before {
  content: "\f013";
  font-family: fontAwesome;
  float: left;
  position: realtive;
  height: 50px;
  line-height: 50px; /* Adjust as needed */
  font-size: 18px;
  display: block;
  margin-right: 10px;
  
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
This is a Text and the Icon should always be here ->
</div>

＆＃13;

＆＃13;

＆＃13;

>> fontAwesome cheat-sheet.