Trimming text from the start and inserting ellipsis in a multi-line passage

Question

Trimming text from the start and inserting ellipsis in a multi-line passage

My goal is to present a paragraph on the webpage that will be dynamically updated based on user actions. I want to restrict the content to a specified number of lines and if the user tries to exceed this limit, the beginning of the paragraph should be truncated with an ellipse as an indicator.

For example, with a maximum of 2 lines: Line number 1, Line2. If another line (line3) is added, it should display as: ...Line2. Line3.

I have experimented with different approaches, such as setting the display property to -webkit-box and utilizing the -webkit-line-clamp feature to limit the content to 4 lines.

p {
display: -webkit-box;
max-width: 200px;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;}

However, I encountered challenges in positioning the ellipse at the beginning of the text and truncating from the start rather than the end. The limitation to 4 lines also posed a constraint.

.ellipsis {
overflow: hidden;
width: 60px;
position: relative
direction: rtl; 
margin-left: 15px;
white-space: nowrap;
}   
.ellipsis:after {
position: absolute;
left: 0px;
content: "...";
}

Due to using multiline text, the white-space property set to nowrap was not applicable. Despite browsing through related questions on Stack Overflow, the specific requirement for my scenario remained distinct.

References to similar inquiries:

- I need an overflow to truncate from the left, with ellipses

- Text-overflow ellipsis on the left side

- Applying an ellipsis to multiline text

javascript html css reactjs

Answer 1

Answer №1

This is a simple method to handle text overflow.

function adjustOverflow(el, content) {
  const container = el.parentElement;
  const words = content.split(' ');
  let index = 0;

  do {
    el.innerText = index ? `… ${words.slice(index).join(' ')}` : content;
  } while (container.scrollHeight > container.clientHeight && ++index < words.length);
}

const resizeObserver = new ResizeObserver(() => {
  adjustOverflow(document.getElementById('target'),
      'A few lines of text will overflow and run over, and the beginning will get chopped off.');  
});

resizeObserver.observe(document.getElementById('outer'));

#outer {
  width: 150px;
  height: 80px;
  overflow: hidden;
}

<div id="outer"><p id="target"></p></div>

Answer 2

This is a simple method to handle text overflow.

function adjustOverflow(el, content) {
  const container = el.parentElement;
  const words = content.split(' ');
  let index = 0;

  do {
    el.innerText = index ? `… ${words.slice(index).join(' ')}` : content;
  } while (container.scrollHeight > container.clientHeight && ++index < words.length);
}

const resizeObserver = new ResizeObserver(() => {
  adjustOverflow(document.getElementById('target'),
      'A few lines of text will overflow and run over, and the beginning will get chopped off.');  
});

resizeObserver.observe(document.getElementById('outer'));

#outer {
  width: 150px;
  height: 80px;
  overflow: hidden;
}

<div id="outer"><p id="target"></p></div>

Answer 3

Answer №2

Comparing CSS to JavaScript options reveals that they are fundamentally different. Unlike JS, conditional styling cannot be achieved in CSS. However, setting a fixed line height can effectively handle text overflow by truncation.

Key Assumptions

The width is a known value
The line height is specified

Illustrative Example:

:root {
  --line-height: 1.2rem;
}

html {
  max-width: 20rem;
  line-height: var(--line-height);
}

p {
  --truncate-after: 4;
    max-height: calc(var(--line-height) * var(--truncate-after));
  text-align: justify;
  position: relative;
  overflow: hidden;
  padding-right: 1rem;
  position: relative;
  display: block;
  height: fit-content;
  text-indent: 1rem;
}

p::after {
  content: "...";
  display: block;
  bottom: 3.83rem;
  position: absolute;
  height: 1rem;
  left: -1rem;
}

<p>
  <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In sint facilis explicabo voluptatum exercitationem earum. Quibusdam vitae, iusto temporibus corrupti tempore distinctio soluta reiciendis. Ab aspernatur facilis autem temporibus veniam.</span>
</p>

<p>
  <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</span>
</p>

<p>
  <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. S'mores are tasty treats for around campfires.</span>
</p>

Answer 4

Comparing CSS to JavaScript options reveals that they are fundamentally different. Unlike JS, conditional styling cannot be achieved in CSS. However, setting a fixed line height can effectively handle text overflow by truncation.

Key Assumptions

The width is a known value
The line height is specified

Illustrative Example:

:root {
  --line-height: 1.2rem;
}

html {
  max-width: 20rem;
  line-height: var(--line-height);
}

p {
  --truncate-after: 4;
    max-height: calc(var(--line-height) * var(--truncate-after));
  text-align: justify;
  position: relative;
  overflow: hidden;
  padding-right: 1rem;
  position: relative;
  display: block;
  height: fit-content;
  text-indent: 1rem;
}

p::after {
  content: "...";
  display: block;
  bottom: 3.83rem;
  position: absolute;
  height: 1rem;
  left: -1rem;
}

<p>
  <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In sint facilis explicabo voluptatum exercitationem earum. Quibusdam vitae, iusto temporibus corrupti tempore distinctio soluta reiciendis. Ab aspernatur facilis autem temporibus veniam.</span>
</p>

<p>
  <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</span>
</p>

<p>
  <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. S'mores are tasty treats for around campfires.</span>
</p>

Answer 5

Answer №3

To implement this feature, you can utilize the code snippet provided below:

Set the height to display the desired number of lines.
Hide content exceeding the specified number of lines.
Utilize the pseudo element to add ellipsis at the end.

.start-ellipsis {
  height: 55px;
  overflow: hidden;
}
.start-ellipsis::before {
  content: "...";
  display: inline-block;
 }

<p class="start-ellipsis">contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>

Note:

Ensure consistency in font size and family to maintain visual consistency. If you modify the font properties after setting the height, adjust the height accordingly. Define the height after finalizing font settings for best results.
Keep in mind that the displayed content may vary based on user's system font settings.

Answer 6

To implement this feature, you can utilize the code snippet provided below:

Set the height to display the desired number of lines.
Hide content exceeding the specified number of lines.
Utilize the pseudo element to add ellipsis at the end.

.start-ellipsis {
  height: 55px;
  overflow: hidden;
}
.start-ellipsis::before {
  content: "...";
  display: inline-block;
 }

<p class="start-ellipsis">contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>

Note:

Ensure consistency in font size and family to maintain visual consistency. If you modify the font properties after setting the height, adjust the height accordingly. Define the height after finalizing font settings for best results.
Keep in mind that the displayed content may vary based on user's system font settings.

Trimming text from the start and inserting ellipsis in a multi-line passage

Answer №1

Answer №2

Answer №3

Similar questions

Passing Selectize.js load callback to a custom function

Is it possible to utilize JavaScript for displaying a continuous stream of images?

Ways to align text and horizontal rule perfectly within a div container?

react Concealing the Card upon clicking a different location

The webpage does not dynamically adjust to fill the screen size when viewed on an iPhone 6 Plus

Utilizing JavaScript, HTML, and CSS to incorporate images within circular frames

How can I merge an array of objects in lodash?

Ensuring Safe Definition of HTMLCollectionOf Elements in TypeScript with React

Unexpected behavior encountered with JQueryUI modal functionality

Unable to set $_POST value when using $.ajax post request

Notation for JavaScript UML component diagrams

Rewriting Next.js with custom headers

Using the conditional rendering technique in a mapped function within a React table cell

Unable to generate a React Native application

Tips for Viewing React.js Pages on Your Web Browser

Error message: Component is unable to access the $store property because it is undefined

Is it possible for me to use the name "Date" for my component and still be able to access the built-in "new Date()" functionality?

Creating tables using ng-repeat in AngularJS and Bootstrap

Creating a list using variables through a Post Request in Express

Tips for Utilizing JSX Modules in React Typescript App (TSX)