How to display long sentences as two lines in nextjs-CodePudding

so I'm using Nextjs to code a website, I want my longer text to be displayed as 2 lines

For example this

This is an example

would be like this instead

This is
an example

After some researching I found something, I then added this to my styles.js file but didn't work. Maybe I'm misunderstanding it

exampleClass: {
    fontSize: 13,
    width: '81px',
    display: 'webkit-box',
    WebkitBoxOrient: 'vertical',
    WebkitLineClamp: 2,
    textOverflow: 'ellipsis',
    overflow: 'hidden',
  },

It's been bugging me for awhile now, so any helps would be much appreciated. Thanks

CodePudding user response：

Welcome to Stackoverflow! This seems to be a straight up HTML/CSS question vs anything to do with NextJS or javascript - you should consider removing the nextjs tag and just tag it as a html/css question. Having said that,

You have several options.

You could add a <br/> tag where you want to get the break. i.e This is an <br/> example
You could wrap the content in a container with a width and set a word-break in CSS , example

<div > This is an example </div>

where the corresponding CSS could set the width and wrap

In your CSS

.container { width: 100px; word-break:break-all; /* Assuming 100px is what it takes and introduces a line break for you */ }