Мне нужно, чтобы некоторый потенциально длинный текст был зажат в две строки, с многоточием, если оно переполнялось, и с изображением, которое всегда было видно в конце текста или с многоточием. Изображение всегда должно находиться внутри ограничительной рамки всего текстового блока.
Например, когда текст должен быть обрезан, оно будет выглядеть следующим образом:
+------------------------------------+
| Some long text that wraps to the |
| second line but is clearly... <img>|
+------------------------------------+
Более короткий текст будет в конечном итоге выглядело это так:
+---------------------------------+
| Not too long, but not too short |
| either <img> |
+---------------------------------+
| Single line like this <img> |
+---------------------------------+
Благодаря этому вопросу я смог получить зажим с двумя линиями с помощью многоточия, работая со следующим:
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
Но я просто не могу заставить изображение отображаться в нужном месте. Если я поместу его в <span> в родительском элементе, то он будет усечен многоточием. Я также попытался поместить на него псевдоэлементы :before или :after, но они поместили изображение за пределы текстовой области.
Итак, как мне заставить изображение всегда отображаться в тексте? пространство блока, а после многоточия (если оно есть)?