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;
            }

Screenshot of what I want

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'元素中。另外，不要忘记为描述元素设置 position：relative; 。

这是一个工作小提琴..希望它能帮到你： https://jsfiddle.net/hmyqrmzs/

屏幕截图示例：

文章摘要中的文字溢出'...'

1 个答案: