我知道您可以使用 CSS 规则的组合来使文本在溢出时以省略号 (...) 结尾（超出父级范围）。
是否有可能（随便说，不）达到相同的效果，但让文本换行不止一行？
div {
width: 300px;
height: 42px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
如您所见，当文本比 div 的宽度更宽时，文本以省略号结尾。但是，仍然有足够的空间让文本在第二行换行并继续。这被 打断white-space: nowrap，这是省略号起作用所必需的。
有任何想法吗？
PS：没有 JS 解决方案，如果可能的话，纯 CSS。
简单的 CSS 属性可以解决问题。以下是三行省略号。
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
看看这个纯css版本：http ://codepen.io/martinwolf/pen/qlFdp
display: -webkit-box;
max-width: 400px;
height: 109.2px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.625;
我不确定你是否看过这篇文章，但是 Chris Coyier 的优秀 CSS-Tricks.com 不久前发布了一个指向这篇文章的链接，它是一个纯粹的 CSS 解决方案，可以完全满足你的需求。
html,
body,
p {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.ellipsis {
overflow: hidden;
height: 200px;
line-height: 25px;
margin: 20px;
border: 5px solid #AAA;
}
.ellipsis:before {
content: "";
float: left;
width: 5px;
height: 200px;
}
.ellipsis>*:first-child {
float: right;
width: 100%;
margin-left: -5px;
}
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right;
position: relative;
top: -25px;
left: 100%;
width: 3em;
margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
/* 512x1 image,gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%.*/
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}<div class="ellipsis">
<div>
<p>
Call me Ishmael. Some years ago – never mind how long precisely – having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of
driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing
up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off –
then, I account it high time to get to sea as soon as I can.
</p>
</div>
</div>当然，作为一个纯 CSS 解决方案意味着它也是一个相当复杂的解决方案，但它可以干净优雅地工作。我将假设 Javascript 是不可能的，因为使用 Javascript 更容易实现（并且可以说更可降解）。
作为一个额外的好处，有一个完整的过程的可下载 zip 文件（如果你想了解它和所有），还有一个 SASS 混合文件，以便你可以将它折叠到你的过程中。
希望这可以帮助！
如果上述方法不起作用，请使用它
display: -webkit-box;
max-width: 100%;
margin: 0 auto;
-webkit-line-clamp: 2;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
overflow: hidden;
text-overflow: ellipsis;
下面的CSS应该可以解决问题。
在第二行之后，文本将包含...
line-height: 1em;
max-height: 2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
我的解决方案重用了 amcdnl 之一，但我的后备方案包括使用文本容器的高度：
.my-caption h4 {
display: -webkit-box;
margin: 0 auto;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 40px;/* Fallback for non-webkit */
}
结合两个类似乎更优雅。two-lines如果只需要查看一行，您可以放弃课程：
.ellipse {
white-space: nowrap;
display:inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.two-lines {
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
}
.width{
width:100px;
border:1px solid hotpink;
} <span class='width ellipse'>
some texts some texts some texts some texts some texts some texts some texts
</span>
<span class='width ellipse two-lines'>
some texts some texts some texts some texts some texts some texts some texts
</span>对于那些在scss工作的人，您需要添加!autoprefixer到评论的开头，以便为 postcss 保留它：
我遇到了这个问题，这就是为什么在这里发布
line-height: 1em;
max-height: 2em;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
您可以使用溶解出来的效果而不是省略号，纯 CSS 并且看起来更专业：
<div style="width: 293px; height:48px; overflow: hidden; ">
More than two line of text goes here-More than two line of text goes here
</div>
<div style="position: relative; top: -24px; width: 293px; height:24px;
background: linear-gradient(90deg, rgba(255,0,0,0) 40%, rgba(255,255,255,1) 99%);">
</div>
在这里，我假设您的背景颜色是白色。
根据我在 stackoveflow 中看到的答案，我创建了这个 LESS mixin（使用此链接生成 CSS 代码）：
.max-lines(@lines: 3; @line-height: 1.2) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: @lines;
line-height: @line-height;
max-height: @line-height * @lines;
}
.example-1 {
.max-lines();
}
.example-2 {
.max-lines(3);
}
.example-3 {
.max-lines(3, 1.5);
}
几乎所有浏览器都可以限制为几行，但在 Firefox 和 IE 中不会显示省略号（3 个点）。演示 - http://jsfiddle.net/ahzo4b91/1/
div {
width: 300px;
height: 2.8em;
line-height: 1.4em;
display: flex;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
在我的角度应用程序中，以下样式对我有用，以实现第二行文本溢出的省略号：
<div style="height:45px; overflow: hidden; position: relative;">
<span class=" block h6 font-semibold clear" style="overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 20px; /* fallback */
max-height: 40px; /* fallback */
-webkit-line-clamp: 2; /* number of lines to show */
-webkit-box-orient: vertical;">
{{ event?.name}} </span>
</div>
希望它可以帮助某人。
text-overflow: ellipsis;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 36px;
max-height: 18px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
我发现了 line-clamp 和 line-height 的组合：D
这是基于 Mahan Lamei 的建议的 Material-UI 褪色文本效果：
创建叠加样式const useStyles = makeStyles((theme) =>
createStyles({
fadeText: {
background: `linear-gradient( 180deg, #FFFFFF00, 0%, #FFFFFF06 30%, #FFFFFFFF 100%)`,
pointerEvents: "none",
}
})
)
<Grid container justify="center">
<Grid item xs={8} sm={6} md={4}>
<Box>
<Box
component="div"
overflow="hidden"
display="flex"
flexDirection="column"
fontFamily="Roboto"
fontSize="body1.fontSize"
fontWeight="fontWeightLight"
textAlign="justify"
height={['8rem']}
>
<Box display="flex">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est
laborum.
</Box>
</Box>
<Box
className={classes.fadeText}
display="block"
position="relative"
top="-4rem"
height="4rem"
/>
</Box>
</Grid>
</Grid>
工作演示：Codesandbox
MUI 的默认主题使用缩写的 CSS 颜色 ( #FFF)，因此如果您想根据当前主题设置渐变，您需要使用完整的六个字符变体覆盖它们。
示例： 用于theme设置渐变（例如基于亮/暗主题）：
const useStyles = makeStyles((theme: Theme) =>
createStyles({
fadeText: {
background: `linear-gradient( 180deg, ${theme.palette.background.paper}00 0%, ${theme.palette.background.paper}06 30%, ${theme.palette.background.paper}FF 100%)`
}
})
)
编辑：更新包括 Tony Bogdanov 的建议
这是一个完全的黑客，但它有效：
div {
width: 30%;
float: left;
margin-right: 2%;
height: 94px;
overflow: hidden;
position: relative;
}
div:after {
display: block;
content: '...';
width: 1em;
height: 1.5em;
background: #fff;
position: absolute;
bottom: -6px;
right: 0;
}
它确实有问题......它可能会尴尬地切断一封信，并且在响应式网站上可能会产生一些奇怪的结果。
这是一个使用 jQuery 管理省略号的简单脚本。它检查元素的真实高度，并创建一个隐藏的原始节点和一个截断节点。当用户单击它时，它会在两个版本之间切换。
最大的好处之一是“省略号”接近最后一个词，正如预期的那样。
如果您使用纯 CSS 解决方案，则三个点看起来与最后一个单词相距甚远。
function manageShortMessages() {
$('.myLongVerticalText').each(function () {
if ($(this)[0].scrollHeight > $(this)[0].clientHeight)
$(this).addClass('ellipsis short');
});
$('.myLongVerticalText.ellipsis').each(function () {
var original = $(this).clone().addClass('original notruncation').removeClass('short').hide();
$(this).after(original);
//debugger;
var shortText = '';
shortText = $(this).html().trim().substring(0, 60) + '...';
$(this).html(shortText);
});
$('.myLongVerticalText.ellipsis').click(function () {
$(this).hide();
if ($(this).hasClass('original'))
{
$(this).parent().find('.short').show();
}
else
{
$(this).parent().find('.original').show();
}
});
}
manageShortMessages();div {
border:1px solid red;
margin:10px;
}
div.myLongVerticalText {
height:30px;
width:450px;
}
div.myLongVerticalText.ellipsis {
cursor:pointer;
}
div.myLongVerticalText.original {
display:inline-block;
height:inherit;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="myLongVerticalText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet quam hendrerit, sagittis augue vel, placerat erat. Aliquam varius porta posuere. Aliquam erat volutpat. Phasellus ullamcorper malesuada bibendum. Etiam fringilla, massa vitae pulvinar vehicula, augue orci mollis lorem, laoreet viverra massa eros id est. Phasellus suscipit pulvinar consectetur. Proin dignissim egestas erat at feugiat. Aenean eu consectetur erat. Nullam condimentum turpis eu tristique malesuada.
Aenean sagittis ex sagittis ullamcorper auctor. Sed varius commodo dui, nec consectetur ante condimentum et. Donec nec blandit mi, vitae blandit elit. Phasellus efficitur ornare est facilisis commodo. Donec convallis nunc sed mauris vehicula, non faucibus neque vehicula. Donec scelerisque luctus dui eu commodo. Integer eu quam sit amet dui tincidunt pharetra eu ac quam. Quisque tempus pellentesque hendrerit. Sed orci quam, posuere eu feugiat at, congue sed felis. In ut lectus gravida, volutpat urna vitae, cursus justo. Nam suscipit est ac accumsan consectetur. Donec rhoncus placerat metus, ut elementum massa facilisis eget. Donec at arcu ac magna viverra tincidunt.
</div>
<div class="myLongVerticalText">
One Line Lorem ipsum dolor sit amet.
</div>
</body>不确定您的目标是什么，但您希望文本出现在第二行吗？
这是您的 jsFiddle： http: //jsfiddle.net/8kvWX/4/刚刚删除了以下内容：
white-space:nowrap;
我不确定这是否是您正在寻找的东西。
问候，
面