How do I only display part of a string using css

Monday, May 20, 2024

193

How do I only display part of a string using css

rated 0 times [ 196] [ 3] / answers: 1 / hits: 30493 / 11 Years ago, thu, march 14, 2013, 12:00:00

I want to be able to display a string of characters up to 10 characters. If the string goes over 10 characters, I'd like to append '...' to the end.

For example, if I have the string:

'helloworldmynameisryan'

I want it to be displayed like so:

'helloworld...'

I'm just displaying my string in a div like this:

<div>DisplayMessage</div>

Is there a class that I could create that would only apply if the string were over 10 char?

More From » html

Answers

8

Unfortunately there isn't a good cross browser way to do this using only CSS. 'text-overflow' relies on the width of the string, and not the length of string as you need.

You can use the .length property of strings in javascript to achieve this

function ellipsify (str) {

    if (str.length > 10) {

        return (str.substring(0, 10) + ...);

    }

    else {

        return str;

    }

}

Hope this helps.

[#79610] Tuesday, March 12, 2013, 11 Years [reply] [flag answer]

answered 11 Years ago

Only authorized users can answer the question. Please sign in first, or register a free account.

ryderalfonsos

ryderalfonsos

Add To Favorites

Total Points: 655

Total Questions: 88

Total Answers: 91

Location: Nauru

Member since Thu, Feb 2, 2023

1 Year ago

ryderalfonsos questions

1 React application with Service Worker - Force update of browser cache on new version

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Call Action Method on button click ASP.NET MVC

Mon, Sep 9, 19, 00:00, 5 Years ago

1 Customizing the JS/CSS in a TrustPilot widget

Wed, Feb 13, 19, 00:00, 5 Years ago

1 How to display a string javascript in HTML

Tue, Feb 12, 19, 00:00, 5 Years ago

1 How to make an undo function in canvas?

Fri, Dec 28, 18, 00:00, 6 Years ago

;