What is the best way to trim text to fit within a predetermined block size automatically?

I have a block with width specified in percentage and height in rem. I need to populate it with text of random lengths. The number of visible lines should be an integer, and the last line must end with a link saying "...read full text". This functionality needs to work seamlessly for all font sizes, line heights, and page scales.

Is there a way to achieve this?

Link to example on jsFiddle

<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio tempore porro voluptatum iste, pariatur. Nam ea alias aliquam nesciunt, tenetur autem nisi laborum officiis voluptatibus laudantium esse, ut reiciendis? ipsum dolor sit amet,
  consectetur adipisicing elit. Illum quisquam, natus in similique consequatur officia aperiam vel voluptatibus, beatae possimus. Vero ab rerum ratione doloremque veritatis totam quas facere porro. ipsum dolor sit amet, consectetur adipisicing elit. Delectus
  est dolorem laborum eius quia architecto, adipisci tempora blanditiis, nisi aliquid expedita numquam debitis. Commodi perspiciatis, inventore accusantium animi quas</div>


.content {
  width: 50%;
  height: 15rem;
  overflow: hidden;
}
javascripthtmlcss

Answer №1

p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
  overflow: hidden;
  height: 200px;
line-height: 25px;
margin: 20px;
border: 1px solid #AAA;
  }

.ellipsis:before {
content:"";
float: left;
width: 5px; height: 200px; }

.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px; }

.ellipsis:after {
content: "\02026";  
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -25px; left: 100%; 
width: 3em; margin-left: -3em;
padding-right: 5px;
text-align: right;
  background-size: 100% 100%;
}
<div class="ellipsis"><div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda modi omnis quod vitae accusantium Doloremque excepturi minima voluptatem numquam perferendis sed? Atque consequatur corporis hic quo suscipit Corrupti cum dolores facilis placeat saepe Sit totam!</p>  
</div></div>

Answer №2

Looking for information that is not reliable.

Using CSS, you can experiment with applying mix-blend-mode and position:sticky. However, most browsers may not fully support this feature (Currently, Firefox & Chrome support both mix-blend-mode and sticky).

.content {
  float: left;
  border: solid;
  margin: 1%;
  width: 45%;
  height: 11rem;
  overflow: hidden;
  background: yellow;
  text-align: justify;
}

.content:after {
  position: sticky;
  bottom: 0;
  float: right;
  margin-left: -1em;
  width: 1em;
  content: '...';
  display: inline-block;
  background: inherit;
  mix-blend-mode: screen;
  z-index: 1;
}

.disclaimer {
  mix-blend-mode: difference;
}
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio tempore porro voluptatum iste, pariatur. Nam ea alias aliquam nesciunt, tenetur autem nisi laborum officiis voluptatibus laudantium esse, ut reiciendis? ipsum dolor sit amet,
  consectetur adipisicing elit. Illum quisquam, natus in similique consequatur officia aperiam vel voluptatibus, beatae possimus. Vero ab rerum ratione doloremque veritatis totam quas facere porro. ipsum dolor sit amet, consectetur adipisicing elit. Delectus
  est dolorem laborum eius quia architecto, adipisci tempora blanditiis, nisi aliquid expedita numquam debitis. Commodi perspiciatis, inventore accusantium animi quas</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio tempore porro voluptatum iste, pariatur. Nam ea alias aliquam nesciunt, tenetur autem nisi laborum officiis voluptatibus laudantium esse, ut reiciendis? <br/> 
<b class="disclaimer">If you see this text, mix-blend-mode is not supported</b></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Submitting data twice through AJAX POST requests

Using a PHP file called via AJAX to insert data into MySQL. Prior to the insert statement, the PHP code runs a select query to check for duplicate records and then proceeds with the insert statement. Problem: When calling the PHP file from AJAX, it gets ...

javascriptjqueryajaxtwitter-bootstrapbootstrapvalidator

Creating a consistent height for Bootstrap 5 Carousel items with varying sizes

I am currently utilizing Bootstrap 5 carousel to display a collection of user-uploaded images that vary in height and width. I am seeking to create a carousel with responsive height and scaled/filled images. Below is the HTML + CSS code snippet I am using ...

htmlcsscarouselbootstrap-5

What is the best way to utilize AJAX in sending chosen files to a PHP script?

I currently have two forms set up. Form A includes fields for name, age, address, email, and a hidden text field that holds the names of images to be uploaded in form B. Form B allows users to browse and select their photos using an input type File. ...

javascriptphpjqueryajaxforms

Best practice for verifying if a form is empty in Ember.js

My form includes HTML5 validation implemented in the following way: <script type="text/x-handlebars" id="project"> <div class="row"> <div class="span6"> <div class="well well-small"> <p s ...

javascriptajaxformsember.js

A single parallax transition designed exclusively for you

I am looking to add a unique parallax transition to my website, specifically one that features a nice scroll followed by a subtle bounce effect. For example, I want to incorporate an arrow that, when clicked, smoothly scrolls the user to the bottom of th ...

javascriptjqueryhtmlcss

What is the process by which JavaScript evaluates the closing parenthesis?

I'm currently working on a calculator project that involves evaluating expressions like (5+4). The approach I am taking is to pass the pressed buttons into an array and then create a parse tree based on the data in that array. One issue I'm faci ...

javascriptjquery

Using Razor view form with various submit buttons

In my razor view, I have a BeginForm command surrounded by a loop that generates an HTML table with a submit button in each row. My concern is how do I identify which specific row the submitted form corresponds to when sending it back to the controller? T ...

htmlasp.net-mvcasp.net-mvc-3razor

Using node appendChild() in HTML for animating elements

As someone who is brand new to the world of web development, I am trying my hand at creating a webpage that expands as a button is clicked. Recently, I stumbled upon this helpful link which includes some code: The HTML code snippet is: <ul id="myList" ...

javascripthtmldomweb

SQL Delete rows from Table

I am dealing with an issue where a table displaying notices has a clear option next to each row, but when the clear button is clicked nothing happens. The setup involves a button that triggers a clear function. What could be causing this problem? <bu ...

phphtml

jQuery carousel displaying a blank slide at the conclusion

I am experiencing an issue with my slideshow where it shows an empty slide after the last element. I suspect that there is something in my script causing this behavior, as it seems to be finding one extra child for the element and adding it as an empty spa ...

javascriptjqueryhtml

Discovering the block's height with the power of Jquery

I have written a piece of code that sets the height of a block of text and then applies that height to an image within the block. However, the size of the image ends up being smaller than the size of the block. https://i.stack.imgur.com/QUFWy.png <scr ...

jqueryhtmlcsscarousel

Steps for assigning a default attribute to all elements

Let's take a look at this code snippet: <form> <input type="text" required="true"> <input type="text" required="true"> <button type="submit">Click</button> </form> Do you think there is a way to assign a def ...

html

Conceal the Slider until Fully Loaded with Slick Slider by Ken Wheeler

I am currently using a slider function called Slick by Ken Wheeler. It is currently being loaded in the footer with just two variables. $('.slickSlider').slick({ dots: true, fade: true }); Currently, ...

jquerycssjquery-pluginssliderslick.js

What makes React.js such a challenging skill to master?

Why am I struggling? After dedicating 6 months to learning React.js, I find myself overwhelmed by the multitude of chapters and feeling lost. Could you kindly share your journey with React.js in a step-by-step manner? Your advice would be greatly apprecia ...

javascriptreactjsvue.js

Interactive feature in Three.js causes page to scroll downwards upon object selection

Exploring Three.js for the first time, I'm looking to integrate it into the landing page of my website. However, I've encountered an issue where clicking on the scene area with my object causes the page to shift downward. I've tried adding o ...

javascripthtmlcssthree.jsweb-testing

Is there a way to disable the useMutation function once it has successfully completed its

Greetings, I am facing an issue with the mutation below: export const useUserSearch = (data) => { return useMutation({ mutationKey: ["user-search", data], mutationFn: fetchUser, }); }; I have implemented it in my component as foll ...

javascriptreactjsreact-hooksreact-query

Can I use jQuery to disable all elements within a div, including anchor and paragraph tags?

Can anyone offer assistance with HTML and CSS? I am trying to disable all content inside a div that has the class "main-wrapper" when a user clicks on a logout button using a jQuery function. I have attempted two methods, but so far without success! funct ...

jqueryhtmlcssjquery-ui

Instructions for applying a specific style to TextFields using a theme provider

Custom transitions and colors have been added to the textfields using the makeStyles hook in the component. The issue lies in needing to define these customs every time they are used in a component. There is a desire to establish them in the theme provid ...

javascriptreactjsmaterial-ui

What is the reasoning behind excluding any JavaScript code between the <script> tags when our intention is solely to incorporate an external JS file?

It's puzzling to me why the author of the "Javascript & Jquery: the missing manual , second edition" recommends the following sentence: When including the src attribute to connect to an external JavaScript file, avoid placing any JavaScript cod ...

javascriptjquery

Is the presence of a <ul> required within the <nav> element?

I was reading an article on which highlights the importance of using the <nav> tag for semantic purposes. Throughout the examples provided, the article consistently utilizes the <ul> tag and emphasizes its usage. Now I'm curious, is thi ...

html