如何在nextjs中将长句显示为两行

Question

所以我使用Nextjs来编写网站代码，我希望我的较长文本显示为2行

例如，这个

This is an example

会是这样而不是

This is
an example

经过一些研究，我发现了一些东西，然后我把它添加到我的styles.js文件中，但没有成功。也许我误解了

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

它已经困扰我一段时间了，所以任何帮助都将不胜感激。感谢

Answer 1

欢迎使用Stackoverflow！这似乎是一个直接的HTML/CSS问题，而不是任何与NextJS或javascript有关的问题——您应该考虑删除nextjs标记，并将其标记为html/css问题。话虽如此，

你有几个选择。

1. 您可以在想要获得休息的位置添加<br/>标记。即This is an <br/> example
2. 您可以将内容包装在具有宽度的容器中，并在CSS中设置word-break，例如

<div class="container"> This is an example </div>

其中相应的CSS可以设置宽度并包装

在您的CSS 中

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