Css ellipsis after 2 lines w3schools

Here's a Material-UI faded text effect based on Mahan Lamei's suggestion:

Create the overlay style

const useStyles = makeStyles((theme) =>
  createStyles({
    fadeText: {
      background: `linear-gradient( 180deg, #FFFFFF00, 0%, #FFFFFF06 30%, #FFFFFFFF 100%)`,
      pointerEvents: "none",
    }
  })
)

Next overlay a gradient on a fixed-height nested Box component

<Grid container justify="center">
  <Grid item xs={8} sm={6} md={4}>
    <Box>
      <Box
        component="div"
        overflow="hidden"
        display="flex"
        flexDirection="column"
        fontFamily="Roboto"
        fontSize="body1.fontSize"
        fontWeight="fontWeightLight"
        textAlign="justify"
        height={['8rem']}
      >
        <Box display="flex">
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore
          et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse
          cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est
          laborum.
        </Box>
      </Box>
      <Box
        className={classes.fadeText}
        display="block"
        position="relative"
        top="-4rem"
        height="4rem"
      />
    </Box>
  </Grid>
</Grid>

Working demo: Codesandbox

MUI's default theme uses abbreviated CSS colors (#FFF) so if you want to set your gradients based on the current theme you will need to override them with the full six character variants.

Example: using theme to set the gradient (e.g. based on the light/dark theme):

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    fadeText: {
      background: `linear-gradient( 180deg, ${theme.palette.background.paper}00 0%, ${theme.palette.background.paper}06 30%, ${theme.palette.background.paper}FF 100%)`
    } 
  })
)

Edit: Updated to include Tony Bogdanov's suggestion

Example

Use of the text-overflow property:

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Both of the following properties are required for text-overflow:

• white-space: nowrap;
• overflow: hidden;

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -o- specify the first version that worked with a prefix.

CSS Syntax

text-overflow: clip|ellipsis|string|initial|inherit;

Property Values

More Examples

Example

Text-overflow with a hover effect (show entire text on hover):

div.a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.a:hover {
  overflow: visible;
}

Try it Yourself »

Related Pages

CSS tutorial: CSS Text Effects

HTML DOM reference: textOverflow property

[ad_1]

text-overflow ellipsis multiple lines

p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

text-overflow: ellipsis; 2 line

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

text-overflow: ellipsis 2 lines

display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

[ad_2]

Please Share

How do I make text ellipses after two lines in CSS?

How do you add an ellipsis in CSS?

Why is ellipsis not working CSS?

How do I make two lines of text in CSS?