相关疑难解决方法(0)

是否可以使用CSS将文本长度限制为"n"行(或者在垂直溢出时将其剪切).

text-overflow: ellipsis; 仅适用于1行文本.

原文:

Ultrices natoque mus mattis,aliquam,cras in pellentesque tincidunt
elit purus lectus,vel ut aliquet,elementum
nunc nunc rhoncus placerat urna!坐下来看看!Ut penatibus turpis
mus tincidunt!Dapibus sed aenean,magna sagittis,lorem velit

想要输出(2行):

Ultrices natoque mus mattis,aliquam,cras in pellentesque
tincidunt elit purus lectus,vel ut aliquet,elementum ...

我有一个弹性布局的网页,如果调整浏览器窗口大小,它会改变其宽度.

在这种布局中,标题(h2)将具有可变长度(实际上是我无法控制的博客标题的头条新闻).目前 - 如果它们比窗户宽 - 它们分成两行.

是否有一个优雅的,经过测试的(跨浏览器)解决方案 - 例如使用jQuery - 缩短了标题标签的innerHTML,如果文本太宽而无法放入当前屏幕的一行,则会添加"..."容器宽度？

对于 reactjs 应用程序，我使用 Material-ui ( https://material-ui.com/ ) 进行设计。而且我需要在卡片中写入与 2 行完全匹配的文本。

当文本可以包含在 2 或 1 行中时，我已经完成的工作，但对于较长的文本，剪切变为单词之前，而不是省略号。

这是我所做的

   <Box
        fontSize="h5.fontSize"
        component="div"
        overflow="hidden"
        textOverflow="ellipsis"
        height={70}
      >
        {title}
      </Box>

在第一张牌上的结果是好的，因为在第二张牌上，最后一个单词“Floooooo”显示在隐藏部分（第三行）中，但没有显示在带有省略号的第二行中。我尝试添加 whiteSpace="nowrap" 但文本只有 1 行高（图 2）

你能帮我吗？

Is there a way to force a part of a text to display on a new line with CSS?

So when the HTML looks like this:

<p>Hello, my name is John.</p>

The result will be:

Hello,

my name is John.

The HTML is generated dynamically, so I cannot change it.