Question 296271 in CSS Question posted in
Some basic documentation can be found here.

Css – Change the color of the text when text is too long (text-overflow: "ellipses")

I would like to change the color of the text when the string is too long. If a string is too long, it will display ‘…’ at the end with the color red otherwise the color will be black. I am not sure if it is possible to achieve.

This is my css class

 textStyle:{
      whiteSpace: 'pre-line', 
      paddingTop:5,
      overflow: 'hidden',
      'text-overflow': 'ellipsis',
       display: '-webkit-box',
      '-webkit-line-clamp': 3,
      '-webkit-box-orient': 'vertical'

  }

My frontend

 String testString = "This is a long long text, it will show three dot when it has more than three line..."

 <div className={classes.textStyle}>{testString}</div>

What it does is when the text is more then 3 line, it will show ‘…’at the end like below

This is a long long text,
it will show three dot when
it has more than three line...

What I want is the change the whole text to font color to red when above case happen. However, above css will also change the color of the text when it only has one line

This is a long long text
Tags:

2

Answers


  1. 0 
    const testString = "This is a long long text, it will show three dots when it has more than three lines...";

const isTextTooLong = testString.split('n').length > 1;

  const textStyle = {
    whiteSpace: 'pre-line',
    paddingTop: 5,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp: 3,
    WebkitBoxOrient: 'vertical',
    color: isTextTooLong ? 'red' : 'black', 
  };
    Login or Signup to reply.
  2. 0

    It is not possible with css only. It does not know it the text overflows.

    With JS maybe you can check if the inner element has less height than the outer

    .outer {
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<div className="outer"><span className="inner"> ...content </span></div>

    The outer element will stop to grow on 3rd line, but the inner one will get all the height of the text. So if outer.offsetHeight < inner.offsetHeight that means the text overflows. This needs to be checked on resize aswell

    Something like this:

    const [overflows, setOverflows] = useState(false)

useEffect(() => {

    const outer = ..., inner = ...  // get the elements with useRef

    const checkOverflow = () => {
        setOverflows(outer.offsetHeight < inner.offsetHeight)
    }
    
    const observer = new ResizeObserver(checkOverflow)
    observer.observe(inner)   // maybe outer, maybe both, not sure
    checkOverflow()
    
    return () => {
        observer.disconnect()
    }
}, [])

...
<div className="outer" style={{color: overflows ? 'red' : 'black'}}>
    <span className="inner"> ...content </span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search