文本溢出.文章摘要

Question

如何给块元素中包含文本的块元素以“.”作为固定高度到底是为了一个有反应的网站？

本质上，文本溢出作为CSS属性无法得到我需要的结果，因为‘.’如果有文本溢出，则需要在末尾添加。如果没有文本溢出，那么就需要“.”。因此，如果剪短了文本，“.”在句子末尾的最后一行可见。

<article>
    <h1>Title</h1>
    <p>Article description</p>
    <p>Read more...</p>
</article>

这是基本的布局。实际代码张贴在下面。它用图片、标题、摘要和“阅读更多”来制作文章容器。

这些箱子应该都是一样大小的。标题所涵盖的行数不同。有时一句，有时两句。盒子应该是有反应的。图像位于左侧，顶部边框与标题容器的顶部边框高度相同。

            <article class="article-grey">
                <h4><a href="http://blog.rondevanlimburg.nl/2015/11/03/topcompetitie-vervolgstappen-2016/">Topcompetitie: Vervolgstappen 2016</a></h4>

                <p>De evaluatie van de Topcompetitie 2015 was duidelijk in zijn eindrapportage… Geslaagd in zijn opzet, aanpak en uitvoering. En dát allemaal in een succesvol wielerjaar. De eerstvolgende stap is nu ...  

                </p><div class="thumbnail-container"><img src="http://blog.rondevanlimburg.nl/wp-content/themes/rondevanlimburg/img/logo_nieuws_gray.svg" alt="img"></div>

                <span><a href="http://blog.rondevanlimburg.nl/2015/11/03/topcompetitie-vervolgstappen-2016/">Lees meer...</a></span>
            </article>

            #news article:nth-child(2) {/*First article different border*/
                border-top-left-radius: 0em !important;
                border-top-right-radius:1em;
            }

            /*Article color*/
            .article-grey {
                background:#efefef;
                border-radius:1em;
                margin-bottom:3em;
                min-height:15em;
                padding:1em 1em 1em 15em;
                position:relative;
                border-top-left-radius: 0em;
                border-top-right-radius: 1em;
            }

我想要的截图

Answer 1

我不确定您是否可以在固定高度的文本框末尾设置‘省略’(或类似的)，但是这里有一个很好的解决方案。

使用(例如)创建新元素：

position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2rem;
box-sizing: border-box;
background-image: linear-gradient(rgba(255,255,255,.1),white 75%);

把它放在“描述”元素里。另外，不要忘记为description元素设置位置: relative;。

这是一把有用的小提琴..希望它能帮到你：https://jsfiddle.net/hmyqrmzs/

截图示例：

​

​