constrain text to 2 lines inside div and restrict all text overflow?

Question

I need to have a parent div, with a child div inside which contains nested text. the child div should only allow space for 2 lines of text, and any extra text should be cut off like in textOverflow=ellipsis, with "..." at the end. something like this:

Could you please tell me the most effective css and html for this? This is what i have come up with (which doesn't work):

outerContainer: {
            padding: theme.spacing.unit * 0.5,
            display: 'block',
            maxHeight: "50px",
            flexGrow: 1,
            width: "100%",
            overflow: 'hidden',
            boxSizing: 'border-box',
    },
        innerContainer: {
            padding: theme.spacing.unit * 0.5,
            display: 'inline-block',
            width: "100%",
            height: 'auto',
            boxSizing: 'border-box',
            textOverflow: 'ellipsis',
            wordBreak: 'break-all',
            fontSize: "0.8rem",
            fontFamily: theme.typography.fontFamily,
        },
    ...
    <div className={classes.outerContainer}>
                    <div className={classes.innerContainer}>
                        <span>{"The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</span>
                    </div>
</div>

score 0 · Answer 1 · answered Mar 04 '19 at 05:05

0

Use overflow: hidden;. Basically, anything that exceed the div's height is cutoff (hidden). Make sure you have the height at whatever 2 lines is for you.

Overflow

.inner {
  border: 2px solid red;
  color: red;
  height: 40px;
  overflow: hidden;
}

<div class='outer'>
  <div class='inner'>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div>
</div>

answered Mar 04 '19 at 05:05

Aniket G

3,471
1
13
39

quite close, but how do i insert the ellipsis also at the end ("...") to signify truncated message? Else it looks like it is a bug. – Kombo Mar 04 '19 at 05:13
@Kombo You're right. It is close. I didn't see the ellipsis at the end. Since this question has already been answered, and I don't want to answer it again, look at this link for more: https://stackoverflow.com/a/42833858/10768127 – Aniket G Mar 05 '19 at 00:24
@Kombo let me know when you've read this so I can delete my answer – Aniket G Mar 05 '19 at 00:25
why do you want to delete your answer? – Kombo Mar 06 '19 at 12:40
@Kombo it's incorrect – Aniket G Mar 07 '19 at 00:13

constrain text to 2 lines inside div and restrict all text overflow?

1 Answers1