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
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.
<br/> tag where you want to get the break. i.e This is an <br/> exampleword-break in CSS , example<div class="container"> 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 */ }