我如何（在 Chrome 中）将“超过 3 行的省略号”和“不适合一行的单词的省略号”与纯 CSS结合起来？
据我所知，-webkit-line-clamp需要display:-webkit-box，但这确实阻止text-overflow: ellipsis了生效。
在示例中，您应该看到两个椭圆。最后一行有一个省略号，因为整个文本较大，第二行有一个省略号，因为该单词无法容纳一行。但事实并非如此？我怎样才能实现这个目标？
p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
height:56px /* fallback */
}<p>Lorem ipsumnnnnnnnnnn dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>此代码使用 CSS 网格和minmax(30rem, 1fr).
grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
一切正常，但当视口 父容器小于 30rem 时，会出现水平滚动条。我需要类似的东西minmax(min(30rem, 100%), 1fr))。知道如何实现这一目标吗？
https://codepen.io/anon/pen/LmEyer
ul {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
grid-auto-rows: 1fr;
grid-gap: 10px;
}
li {
background-color: #aaa;
padding: 0.5rem;
}<ul class="list">
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid item</li>
<li>grid …