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

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

• javascript
• html
• css
• reactjs

3 Answers 3

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

The correct css uses webkit clamp line that is well supported except for IE. see https://developer.mozilla/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.

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;
    width: 250px;
}

<h1>Overflow wrap</h1>
<p class="overflow-wrap">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

TailwindCSS Solution

You can install the line-clamp plugin:

pnpm install @tailwindcss/line-clamp

Then add it as a plugin in your tailwind.config.cjs file:

module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
  require("@tailwindcss/typography"),
  require('@tailwindcss/line-clamp'), <------
 ],
};

Then add one of the official line-clamp-# classes to your ponent like so:

<h2 class="line-clamp-3">
    {tip.data.content}
</h2>

The official TailwindCSS docs mention that line-clamp is included in the latest release but I can't get it to work without manually installing as shown here.