将图标放置在截断的多行文字的末尾，而不打断为新行

Question

我有一个要求，需要显示两行文本，后跟一个图标(通过img标记呈现(。如果文本长度超过两行，则需要显示省略号。但是图标应该与文本内联，并且当文本长度增加时不应该被剪切。

它应该是类似的东西

A lengthy text that
spans two lin.. 🙂

假设表情符号是img标签

将图标放在带有文本溢出省略号的行之后

对于单行文本，这可以通过上面堆栈溢出中的答案所建议的内联块来完成。但对于多行文字，如果我添加这个，它就不起作用。

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;

https://codepen.io/praneethack/pen/LYxxPGN

编辑：已修改代码笔代码，使其具有img标记，而不是字体图标

Answer 1

试试这个

.title {
text-overflow: ellipsis;
overflow: hidden;
/*white-space: nowrap;*/
display: inline-block;
width: 200px;
vertical-align: middle;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
border: 1px solid #333;
font-size: 1em; /* Set a font size */
max-height: calc(2em + 5px); /* Set height for twice the font size plus some padding */
}

我删除了空白值，并添加了1em的字体大小。

然后我将最大高度设置为2米，这将显示最多两行。

编辑完全跳过整个图像问题。

这是一个更新的答案

.title {
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
width: 200px;
vertical-align: middle;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
font-size: 1em;
max-height: calc(2em + 5px);
position: relative;
border: 1px solid #333;
}
.icon {
width: 15px;
position: absolute;
bottom: 0;
right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span>
<span class="title">
<img class="icon" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBdJ13-QNu7aJefmbaMMuY6ngaEbGWXaf6Ag&usqp=CAU"/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</span>
</span>

图像标记在跨度内。请注意，它必须在文本之前。

Answer 2

此效果需要两个(相同的(元素：

第一个元素(图标(被放置为文本容器的第一个子元素，它只有在文本被截断时才可见，而第二个元素(相同的图标(被放在最后，所以如果文本被截断(不符合其容器的高度(，它显然不会显示。

使用javascript检测文本何时被截断，如果文本适合容器并且没有被截断，则第一个图标元素将被隐藏。

需要注意的是，--line-clampCSS变量用于line-clamp属性值和::before伪元素，因为"；假的"；floating元素是；推动"；底部出现在文本末尾的第一个图标元素(当被截断时(

function isTextTruncated( elm ){ 
const truncated = elm.scrollHeight > elm.clientHeight
elm.classList.toggle('truncated', truncated)
}
// observe resize
const resizeObserver = new ResizeObserver(m => isTextTruncated(m[0].target))
resizeObserver.observe(document.querySelector('p'), { attributes: true })

p {
--line-clamp: 4;

display: -webkit-box;
-webkit-line-clamp: var(--line-clamp);
-webkit-box-orient: vertical;

width: clamp(300px, 50%, 900px);
resize: horizontal;
overflow: hidden;
}
p::before {
content: '';
float: right;
height: calc((var(--line-clamp) - 1) * 1lh);
}
p .icon:first-child {
clear: both;
float: right;
}
/* 
no need to render the "show more" link if 
the text is fully-visible and not truncated
*/
p:not(.truncated) .icon:first-child {
display: none;
}

<p>
<span class='icon'>😀</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
<span class='icon'>😀</span>
</p>

Answer 3

使用:before:可以在省略号附近放置图标

.foo {
position: relative;
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
color: black;
}

.foo:after {
content: "... f015";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
top: 88%;
right: 0;
transform: translateY(-50%);
background: #fff;
padding: 0 2px 0 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="foo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>