How to set maximum line of text using flex css react-CodePudding

I'm having a screen like this

But it look actually not so good if the title or author is so long, so i wonder how can i set maximum of text line to fixed number, example 3, example:

This very long 
long long
This very long 
long long
This very long 
long long

Will be

This very long 
long long
This very long....

I already add this to css:

  max-width: 128px;
    max-lines: 3;

    font-size: 16px;
    color: grey;
    text-align: center;
    text-overflow: ellipsis;

But not work

CodePudding user response：

The method you're trying will only work with one line of text due to the limited capabilities of css (That is if you expect it to work dynamically and not manually)

The following styles are the ones responsible for achieving that effect:

.overflow-wrap {
    white-space: nowrap;
    overflow: hidden;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
  max-lines: 3;
    width: 250px;
}

<h1>Overflow wrap</h1>
<p >This text will be wrapped after a certain amount of words</p>
<p>This text will not be wrapped after a certain amount of words</p>

To achieve the effect you want, there is an answer provided here:

css word wrap with ellipsis

CodePudding user response：

css max-lines "is a proposal not yet supported anywhere" according to https://caniuse.com/sr_css-max-lines.

The correct css uses webkit clamp line that is well supported except for IE. see https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

In your case you would use something like:

{
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

where the line-clamp value is a code specifying elipses after 3 lines. That block is taken from an example in the MDN link given above, where more information can be found.