Ways to shorten text on mobile screens using CSS

Is it possible to use CSS to truncate text based on the current screen size or media queries? For example, consider this paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor
vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Ut vel ullamcorper tortor...

I am looking for a way to truncate text dynamically based on the device being used to view the page. Is there a CSS solution that can achieve this?

.truncate-ellipsis {
    display: table;
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
}

.truncate-ellipsis > * {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="truncate-ellipsis">
    <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ullamcorper tortor...
    </span>
</div>
cssresponsive-designtruncate

Answer №1

To achieve multi-line truncation, I utilized the flex property. The text will be truncated after 6 lines on larger devices and after 3 lines on screens smaller than 768 pixels.

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

@media screen and (max-width: 768px) {
  p{
    -webkit-line-clamp: 3;
  }
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor
vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor 
posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique 
non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui 
rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo 
nibh. Sed cursus ante ut nunc molestie viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor
vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor 
posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique 
non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui 
rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo 
nibh. Sed cursus ante ut nunc molestie viverra.</p>

Answer №2

 filter('textLimit', function () {
        return function (text, length) {
            if (text.length > length) {
                return text.substr(0, length) + "<span>...</span>";
            }
            return text;
        }
    $scope.text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor
    vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur 
    adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor 
    posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique 
    non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
    cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum 
    dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui 
    rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo 
    nibh. Sed cursus ante ut nunc molestie viverra".

    <span > {{text |textLimit :50}} </span>

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

Converting bullet point list to checkboxes once requirements have been satisfied

I am working on developing a password validator with specific regex conditions in Material UI that transitions from bullet points to checkboxes when the criteria are satisfied. https://i.sstatic.net/b0pgb.png Initially, I attempted to use the npm library ...

javascriptcssreactjsnpmmaterial-ui

Positioning HTML elements using CSS and avoiding the use of tables

I'm struggling with my clear CSS declarations. This is how I'd like it to appear: View the Fiddle demo HTML: <div id="timesheeteditor"> <div id="weekselector"> <div>Week 1</div> <div>Week 2</div> ...

htmlcss

What is the process for adjusting the color of the underline in Material UI input fields

I am facing an issue with a Material UI Select component that is on a dark background. I want to change the text and line colors to white just for this particular component, while keeping the rest of the Select instances unchanged. Although I have managed ...

cssreactjsmaterial-ui

Changing the cursor to a waiting state following a mouse click

Looking for some help here - when I click a button, the cursor remains standard and doesn't show loading. Any suggestions on how to fix this? Below is the snippet of my code: <div class="signup"> <input type="submit" value="Sign Up" tit ...

css

Numerous slideshows using identical scripts

I am facing an issue with my code for multiple slideshows. Currently, it works fine for a single slideshow but when I have multiple slideshows and mouse over any of them, all the slideshows start running due to sharing the same class. However, if I try to ...

javascriptjquerycss

The rendering of the font appears distinct when viewed on an iPad compared to when displayed

Visit this website. The menu displays correctly on desktop, but on iPads, the font appears larger leading to a line break. Is it because the selected font isn't loading and defaulting to Times New Roman instead? It seems likely since I experience the ...

htmlcssfonts

Display the HTML element prior to initiating the synchronous AJAX request

I'm looking to display a <div> upon clicking submit before triggering $.ajax() Here's my HTML: <div id="waiting_div"></div> This is the CSS: #waiting_div { position: fixed; top: 0px; left: 0px; height: 100%; ...

javascriptjqueryhtmlcssajax

Can the text color be customized to match the brightness level of the background area being covered?

Does anyone know of a plugin or method that can automatically change the color of text or swap predefined images/icons based on the average brightness of its parent element's background? If the background is dark, it should make the text white or swit ...

javascriptjqueryhtmlcsssass

Loading images in advance before webpage loads

Welcome friends! This is my first time asking a question here, so I hope I'm doing it right :) I'm looking to preload 3 images before the webpage fully loads so that they all appear simultaneously. Currently, the images load one after another and ...

javascriptjqueryhtmlcss

Using the Drupal Colorbox module with Internet Explorer

This problem has been driving me crazy! I'm struggling to make Colorbox show the borders correctly in IE7 (and even in IE6, but I'll settle for just IE7 at this point!). You can check out the issue here. When you click on a picture in the galler ...

cssinternet-explorerdrupalgallerycolorbox

Is it possible to serve CSS using relative paths that go beyond the URL root?

I've encountered a file path issue with my HTML and CSS files. My HTML file is located in: src/test/html/index.html And the corresponding CSS file is in: src/test/css/index.css In the HTML file, the CSS is linked using: <link rel="stylesheet" ...

htmlcssbrowsercross-browser

Challenge with CSS Box Shadow

Hey there, I've been attempting to add a shadow effect to a box inside another box but I'm struggling to achieve the desired outcome. <div class="box effect2"> <div class="box effect2"> Box inside a box <div> &l ...

css

Resolve the issue of autofill data overlapping with field labels

My form incorporates the Canada Post AddressComplete tool, which functions similarly to Google Maps Autocomplete. As you type your address, suggestions appear in a drop-down menu. However, after selecting an address, the text in the Postal Code and City f ...

javascriptcssformsautofill

The size of jVectorMap is displayed too diminutive

Why isn't my jVectorMap adjusting to the new height I've specified for the containing div? It only displays at the default height of 54px. Within a document.ready function in my scripts.js file, I have the following code: $('#team-map-usa& ...

javascriptjqueryhtmlcssjvectormap

An autocomplete CSS editor with Firebug-like features

Looking for a CSS (or HTML) editor that offers code autocompletion similar to Firebug's features. I believe it's referred to as "autocomplete as you type." Thank you! Edit: I came across a tool called Zen Coding that provides shortcuts for cod ...

htmlcss

I require assistance on how to properly arrange images in a div so that they stack

I'm having an issue with arranging a series of images within a div where they stack on top of each other. The div has a CSS width of 450px, and the top image always matches this width. Subsequent images vary in size and need to be aligned flush right ...

css

Is it wise to use the<sup>attribute for mandatory form fields?

Would it be wise to utilize the <sup> tag instead of using margin-top: -xnumberofpx for indicating required fields in a form? <label for="address1" required>Address line 1<sup><img src="/src/images/requiredAsterix.png" width="10" heig ...

csshtmlaccessibility

Adding a translucent overlay on top of a background image within a div, while keeping the text on top

Here is the current code that I am working with: <div class="square"> <div id="wrapper"> <h2>Text</h2> <h3>Text</h3> </div> </div> .square { padding: 10px; width: 150px; height ...

htmlcssimagebackgroundhover

Using CSS units such as vw, vh, or percentage to specify height is not possible

In my Ionic app, I am adjusting the width and height of a div based on the viewport dimensions. This setup functions correctly on the browser and Android 4.4 devices. However, it does not work as expected on Android 4.2 (the height is constrained to the te ...

androidcsscordovaionic-framework

How can I move a child element off-center within a parent div in CSS without affecting the position of the other child

Below is an example of code that demonstrates what I'm trying to accomplish: <nav className="flex flex-row justify-between items-center w-full h-[100px]"> <div className="flex flex-row items-center sm:pl-0 ml-auto"> ...

htmlcssnext.jstailwind-css