Reducing the amount of text displayed on ion-text to a minimum

HTML:

<ion-list *ngFor="let message of messages">
    <ion-item lines="none" type="button" button="true">
        <ion-grid>
            <ion-row>
                <ion-col class="message">
                    <ion-text>
                        {{ message.text }}
                    </ion-text>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-item>
</ion-list>

CSS:

.message {
    color: var(--ion-color-default-shade) !important;
    border-radius: 5px;
    padding: 8px;
    max-height: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
}

I am trying to showcase only 3 lines of content within the <ion-text> element, with an ellipsis to indicate that there is more content available for viewing by clicking on it. However, my current code does not seem to be displaying the HTML in ellipses as expected. I am seeking advice on what might be missing or incorrect in my implementation. Any help would be appreciated.

htmlcssangulartypescriptionic-framework

Answer №1

Give this a shot! Use the nowrap attribute to prevent text from wrapping to the next line, and add !important to make sure the ellipsis property is applied.

.message {
  white-space: nowrap !important;
  width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--ion-color-default-shade) !important;
}

I hope this solution works for you. :)

Answer №2

text-overflow: ellipsis is designed to work in conjunction with white-space: nowrap CSS for single-line text truncation. However, if you're looking to apply ellipsis to multiline text, you might be out of luck as CSS lacks a standard solution for this.

One workaround could involve using JavaScript to count characters and manage the truncation dynamically.

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

Guide to designing a CSS gradient with a downward arrow linked to a specific container

I'm attempting to add a triangular arrow beneath the v-container, complete with a gradient color scheme. However, I'm struggling to integrate the gradient seamlessly. If I use CSS to create the arrow, the gradient doesn't align correctly. ...

htmlcssvuetify.js

Default interface value

I have defined an Interface as shown below: export interface IItem { name: string; isActive?: boolean; } The data structure is like this: const data: IItem[] = [ { name: 'item1', isActive: true }, { name: 'item2', ...

angular

imported classes from a module cannot be accessed within the same module

Here is some TypeScript code that I wrote: Within my module, I am importing a library called ts-events. import {SyncEvent} from 'ts-events' module MyModule{ export class MyService{ } } In the same module but in a different file, I'm ...

angularjstypescriptservicetypescript-typings

Arrange containers into a tower?

Currently, I am exploring the concept of stacking boxes. While I have a solid grasp on how to stack them vertically from top to bottom, I find myself puzzled about how to stack them horizontally. Check out my vertical stacking method here See how I a ...

htmlcss

Angular: Dynamically changing checkbox's status from parent

I'm in the process of developing a switcher component that can be reused. The key requirement is that the state of the switch should only change after an API call is made at the parent component level. If the API call is successful, then the state cha ...

javascriptangularcheckbox

What is the best way to center my form vertically within the form container?

I am having trouble aligning my form vertically. I've experimented with different methods such as using display: table-cell and vertical-align: middle property, but nothing seems to work. I want to maintain the current structure of the page and would ...

htmlcss

Determine the total of the final column in recently added rows by utilizing JavaScript

I have a table where users can dynamically add rows as needed. I am looking to implement a feature that will display the total of the last column in a text box underneath the table using JavaScript. If real-time calculations are not feasible, then I am ope ...

javascripthtmlcalculated-columns

Utilizing React Router with the power of useCallback

My route configuration is set up as follows: const defineRoutes = (): React.ReactElement => ( <Switch> <Redirect exact from="/" to="/estimates" /> <Route exact path="/estimates" component={CostingPa ...

reactjstypescriptreact-router

Problem with organizing data by dates

My timers list looks like this: timer 1 => { startDate = 17/01/2019 11PM, endDate = 18/01/2019 9AM } timer 2 => { startDate = 18/01/2019 7AM, endDate = 18/01/2019 1PM } timer 3 => { startDate = 18/01/2019 12PM, endDate = 18/01/2019 10PM } time ...

javascriptangulartypescript

The struggle of media queries: How can you reset an element to its original display style when it's set to none?

If faced with the following scenario, how would you handle it? Imagine this: You need to hide a visible element when a specific media query is met: .myElement { display: block; } and the media query to hide it: @media (min-width: 1000px) { .myElement ...

htmlcssmedia-queries

Show images dynamically with the help of Flask

Imagine having a camera that can capture real-time images and save them to a folder named "./static". The goal is to showcase each processed image on a local web page using Flask in Python. This means that the system user will be able to view the results ...

pythonhtmlflaskweb

Trigger a series of functions upon clicking with ReactJS

Need some assistance with an alert message functionality. I have a button labeled Checkout, and when clicked, it should clear the cart and display an alert. At present, the individual functions work as expected - calling emptyCart() works fine, and calling ...

javascripthtmljquerycssreactjs

Implementing the @media rule using Javascript

I'm trying to use JavaScript to add an image dynamically, but I want to remove it when the viewport is 600px or wider. This is my approach so far: var img = document.createElement('img'); // (imagine here all the other fields being defined ...

javascripthtmlcss

The website functions properly with Live Server, but encounters issues when launched from the Files directory

After testing multiple browsers, the site consistently works fine with Live Server. However, when accessed through Firefox or Chrome, my style.css fails to load completely. On Edge, an error message indicates that the file is missing. Below are snippets of ...

htmlcssfilebootstrap-5liveserver

What is the best way to bring in local modules within the browser environment using Playwright?

Let me illustrate what I am attempting to achieve: ../src/Foo/Bar.ts represents a local TypeScript file This particular file contains code that is designed to function within a browser environment (it utilizes WebSockets), and therefore needs to be execu ...

typescriptplaywrightsveltekitdynamic-import

[deactivated]: Modify a property's value using a different component

One of the requirements for my button is that it should be disabled whenever the callToActionBtn property is true. match-component.html <button [disabled]="callToActionBtn" (click)="sendTask()>Send</button> match-component.ts public callToA ...

angulartypescript

Utilizing Pipes within a Method in Angular 2 along with Dependency Injection triggers an "Insufficient Number of Arguments" error

I am searching for a solution to incorporate a custom pipe into my class. The custom pipe itself ( referenced from this source, many thanks ) involves injecting a dependency (the DomSanitizationService). import { Pipe, Inject, Injectable } from '@ang ...

angulartypescript

Error: The element 'mdb-icon' is not recognized and cannot be parsed

I am currently utilizing Angular 7 alongside Bootstrap 4, and encountering the following error message in my console. Uncaught Error: Template parse errors: 'mdb-icon' is not a known element: If 'mdb-icon' is an Angular co ...

angularbootstrap-4

What is the process for modifying object information using string input in typescript?

How can I update an object's value in TypeScript based on a string input related to the object key? const objData = { // random value A: 11, B: 13, C: 53, innerObj: { AStatus: true, BStatus: false, CStatus: true, }, }; type Item ...

typescripttypescript-genericsprisma

What is the method for displaying a div adjacent to a password input field?

I am attempting to display a password verification box next to an input field. The current logic is functioning properly, but the box containing all password requirements is not appearing in the correct position. Instead of being positioned adjacent to the ...

javascriptjqueryhtmlcsstwitter-bootstrap