Insert an icon at the conclusion of a truncated multi-line text without causing a line break

Question

Insert an icon at the conclusion of a truncated multi-line text without causing a line break

I have a specific requirement where I am looking to present two lines of text, followed by an icon displayed through an img tag. If the text exceeds two lines, I want to display an ellipsis. However, it is crucial that the icon remains inline with the text and is not clipped if the length of the text increases.

The desired outcome should resemble:

A lengthy text that
spans two lin.. 🙂

For this example, let's consider the emoji as an img tag

Place icon after a line with text-overflow ellipsis

When dealing with a single line of text, utilizing inline-block as recommended in the stack overflow thread above works perfectly. However, when attempting to apply this to multiline text, it doesn't have the desired effect.

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

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

Edit: I have made adjustments to the code on CodePen to include an img tag instead of a font icon

javascript css

Answer 1

Answer №1

Give this a try!

.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;
  border: 1px solid #333;
  font-size: 1em; /* Set font size to 1em */
  max-height: calc(2em + 5px); /* Set maximum height for two rows */
}

I removed the white space value and added a font size of 1em for better readability.

Then I set a max height of 2em to display a maximum of two rows of text.

UPDATE I initially overlooked the image aspect.

Here's an improved solution

.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>

The image is placed inside the span element which needs to appear before the text content.

Answer 2

Give this a try!

.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;
  border: 1px solid #333;
  font-size: 1em; /* Set font size to 1em */
  max-height: calc(2em + 5px); /* Set maximum height for two rows */
}

I removed the white space value and added a font size of 1em for better readability.

Then I set a max height of 2em to display a maximum of two rows of text.

UPDATE I initially overlooked the image aspect.

Here's an improved solution

.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>

The image is placed inside the span element which needs to appear before the text content.

Answer 3

Answer №2

Two elements are essential for achieving this effect:

The first element, which is an icon, should be positioned as the initial child of the text container. It remains visible only when the text is truncated. The second element, which is the same icon, should be positioned at the end. Consequently, it will not be displayed if the text is truncated and does not fit the height of its container.

By using JavaScript to detect truncation of the text, the first icon element will be hidden when the text fits within the container and is not truncated.

It is worth mentioning the utilization of a --line-clamp CSS variable for both the line-clamp property value and the ::before pseudo-element. This "pseudo-floated" element assists in positioning the first icon element at the end of the text when it's truncated.

This example supports horizontal resizing:

function checkTruncation( element ){ 
  const truncatedText = element.scrollHeight > element.clientHeight
  element.classList.toggle('truncated', truncatedText)
}

// observe resize changes
const resizeObserver = new ResizeObserver(m => checkTruncation(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;
}

/* 
  hide 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 4

Two elements are essential for achieving this effect:

The first element, which is an icon, should be positioned as the initial child of the text container. It remains visible only when the text is truncated. The second element, which is the same icon, should be positioned at the end. Consequently, it will not be displayed if the text is truncated and does not fit the height of its container.

By using JavaScript to detect truncation of the text, the first icon element will be hidden when the text fits within the container and is not truncated.

It is worth mentioning the utilization of a --line-clamp CSS variable for both the line-clamp property value and the ::before pseudo-element. This "pseudo-floated" element assists in positioning the first icon element at the end of the text when it's truncated.

This example supports horizontal resizing:

function checkTruncation( element ){ 
  const truncatedText = element.scrollHeight > element.clientHeight
  element.classList.toggle('truncated', truncatedText)
}

// observe resize changes
const resizeObserver = new ResizeObserver(m => checkTruncation(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;
}

/* 
  hide 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 5

Answer №3

One way to position an icon next to ellipsis is by using the :before pseudo-element:

.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>

Answer 6

One way to position an icon next to ellipsis is by using the :before pseudo-element:

.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>

Insert an icon at the conclusion of a truncated multi-line text without causing a line break

Answer №1

Answer №2

Two elements are essential for achieving this effect:

Answer №3

Similar questions

Tips for employing the slice approach in a data-table utilizing Vue

Does the a:hover:not() exception only apply to elements with the .active class?

Avoiding the insertion of duplicates in Angular 2 with Observables

What causes the HTML element's X position value to double when its X position is updated after the drag release event in Angular's CDK drag-drop feature?

Running two blocks of scripts (utilizing lab.js as a loading manager)

broken alignment of right-aligned Bootstrap navbar

Tips for utilizing an npm package in conjunction with Hugo

Mastering the art of using transitions in conjunction with display properties

Strengthening JavaScript Security

How can I determine the mouse's location relative to the bottom right corner of the

Methods for submitting POST requests with key data enclosed in quotation marks?

How to Generate an Array of JSON Objects in JavaScript on a Razor Page using a Custom ViewModel in MVC?

HTML/CSS: Maintain Hover-Over Pop Up Boxes in Position Until Another Element is Hovered Over

Implementing Jquery Table Selection with Custom CSS Class

Encountering issues with the Justify props in Material UI grid – how to troubleshoot and solve the problem

Updating a session or global variable cannot be read by an AJAX request

Launching a React build using Docker on Apache or AWS

Various image resolutions designed for extra small, small, medium, and large screens

Using a ternary condition within the ngClick directive

The module located at "c:/Users//Desktop/iooioi/src/main/webapp/node_modules/rxjs/Rx" does not have a default export available