Restricting the number of lines within a paragraph in Angular 2

Is there a method to limit the number of lines in a <p> tag and add an ellipsis (...) at the end?

Using character count for truncation doesn't work well as the width of the element varies according to device screen size.

Answer №1

Avoid the use of Angular and focus on utilizing CSS instead. By setting a specific height and applying a text-overflow property, you can achieve the desired effect.

Consider implementing code similar to the following:

p{
  height: 200px;
  text-overflow: ellipsis;
}

To determine the appropriate height in pixels based on the number of lines you want to display, calculate accordingly. For instance, if you wish to show 10 lines with each line measuring 20px in height, the total height should be set at 200px.

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

Triggering Submit Button Based on Checkbox Value in jQuery

Hey there, I'm encountering an issue. Let's say I have two types of checkboxes - one for person and one for company. If I submit the form without checking any of the person or company checkboxes, I want jQuery to display an alert. Otherwise, the ...

SwipeJS is not compatible with a JQuery-Mobile web application

I am currently attempting to integrate SwipeJS (www.swipejs.com) into my JQuery-Mobile website. <script src="bin/js/swipe.js"></script> <style> /* Swipe 2 required styles */ .swipe { overflow: hidden; ...

What are the steps for implementing two Li elements in HTML with distinct attributes?

Usage I decided to utilize li elements in various ways on a single web page. I used them as part of a navbar at one point and then later repurposed them for an image grid. Issue The problem arises when the dropdown menu within the navbar is partially hid ...

Learn how to display a tooltip for every individual point on a Highcharts network graph within an Angular

I am currently working on developing network graphs using highcharts and highcharts-angular within my Angular application. I have successfully managed to display the graph with datalabels, but now I need to implement tooltips for each point or node on the ...

React components featuring Material UI icons

I'm in need of assistance. I am looking for the Material UI icons, but I can't seem to find any information on how to obtain them. https://i.stack.imgur.com/FAUc7.jpg ...

Parsing an Object in Java

I have a JavaScript object that I am sending back to Java using AJAX: var jsonData = { "testJson" : "abc", "userId" : "123" }; After printing the map, it appears as follows: key: jsondata value:[object Object] What is the correct ...

Guide on compiling SCSS to CSS when running npm start

When running my application with npm start, I'm unable to compile scss files to css live. Is there a way to achieve live reload for sass to css similar to how ts are compiled to js by the tsc:w utility? Currently, I have to stop the build, then run gu ...

A guide on accessing the content of two p tags in React by utilizing the useState hook in ReactJs

I am currently working on retrieving the values of two p tags simultaneously to send those values to the backend. This is my useState declaration: const [isProposal, setIsProposal] = useState({ contractorName: "", newProposal: "" }); c ...

I have implemented the ag grid date filter, but I am having trouble getting the apply and reset buttons to work properly within the filter

Currently, I am facing an issue with the ag grid date filter implementation. I am attempting to add both apply and reset buttons to the filter, but the code I have used does not seem to be functioning correctly. Here is the column definition code snippet ...

What exactly does "blocking and tackling" refer to in the Angular2 documentation?

As I delved into the online documentation for angular2, I stumbled upon a puzzling term - "blocking and tackling" in the ADVANCED - Angular Module chapter (https://angular.io/docs/ts/latest/guide/ngmodule.html). ... "It's all just basic blocking and t ...

What is the method for accessing extra parameters in the signIn() callback function in [...nextauth]?

As per the Next Auth documentation, it is possible to pass extra parameters to the /authorize endpoint using the third argument of signIn(). The examples provided are: signIn("identity-server4", null, { prompt: "login" }) // always ask ...

Ways to obtain parameter from URL in Express without diving into the request object

const express = require('express'); const app = express(); app.use('/', anyroute); // in anyroute file router.route('/:id').get(controlFunction) controlFunction(req, res, res)=> { // Here we can get the "id" fr ...

Angular | Creating a template reference variable for a division element

Utilize the code provided to create 4 divs each sized at 200x200. In order to apply a specific class to a div when the mouse is hovering over it (without affecting the other three), you need to follow these steps: <style> div {height: 200px; wid ...

Complete the execution of the jQuery function

It may seem like a simple idea - to stop executing a function, just use return false, return, or call on a function like undefined. However, in this case, it's not that straightforward. I'm working on a website project that includes a snake game ...

Explore the capabilities of redux independent of the react framework

I've been searching for hours trying to find a way to access the store (to dispatch and observe) without using React Components, but have had no luck. Here's my situation. I created the store in the root of the App: import { Provider } from &ap ...

Problems arise when using AngularJS' .run function after navigating to a different page

I have encountered an issue with ngRoute while navigating between pages in my web application. The main login page is called index.html, and the routing is controlled by the main js file. However, I face a problem when trying to use a .run block on a speci ...

AngularJS triggers after the completion of Ajax requests

How can I implement AJAX within Angular AJAX? In my Angular setup, it looks like this: Index.html MyApp.controller('MainController', function($scope, $http, $location , $compile) { $scope.content_middle = 'Welcome'; ...

Is the process.env.NODE_ENV automatically set to 'production'?

While examining someone else's code, I noticed this particular line. if (process.env.NODE_ENV === 'production') { ... The application in question is a node.js app with express server and reactjs front-end. If we were to deploy it on Heroku ...

How to dynamically load a component in Angular 2 using a string argument

I am currently developing an app that performs static analysis on components from an Angular application and then renders them within another Angular app. This app serves as a comprehensive style guide with detailed information on inputs and other key aspe ...

Angular Object

I am currently working on a small Angular project that focuses on displaying and managing bank accounts using CRUD operations, including transactions. However, I have encountered an issue that is puzzling me. Whenever I click on one of the listed accounts, ...