将文本长度限制为其容器大小

Limit text length to its container size

本文关键字：文本 长度限制      更新时间：2023-09-26

Fiddle -我们与header和content有一些div。页眉可以短至1行，也可以长至2-3行。内容可能很长，需要cutted。

如何剪去所有剩下的地方，而不是更多。我已经考虑了一段时间，但我没有任何"干净"的想法。

在你的contclass中添加这个justify属性:

text-align:justify;

您想要剪长文本以避免换行吗?如果我明白了，我做了一个简单的例子，可以满足你的需要。根据font-size:

调整CSS高度
<html>
    <style>
        /*header*/
        h2{
            height: 30px;
            overflow: hidden;
        }
        /*content*/
        div{
            height: 90px;
            overflow: hidden;
        }
    </style>
    <body>
        <h2>
            Vestibulum vestibulum faucibus metus vel sagittis. Vivamus quis venenatis arcu. Etiam ullamcorper lacinia justo ut tristique. Suspendisse orci tortor, auctor sed posuere nec, porta ac arcu. Nullam varius eleifend felis sed egestas. Mauris aliquam rhoncus risus, ut congue augue sollicitudin eget. Sed ullamcorper placerat eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce et tincidunt ligula. Integer malesuada ligula sit amet nulla dictum sed tincidunt elit scelerisque. Proin venenatis dolor hendrerit metus consectetur ornare. Nulla sed consectetur libero. Nunc feugiat fermentum enim, eget ornare lorem vehicula ac. Nam volutpat tortor a nisi interdum eu sagittis nibh dapibus. Phasellus aliquam ipsum nec sapien gravida auctor. Donec venenatis, magna ut tempus sollicitudin, nunc turpis lacinia metus, ac suscipit sem sem non nisi.
        </h2>
        <div>
            Vestibulum vestibulum faucibus metus vel sagittis. Vivamus quis venenatis arcu. Etiam ullamcorper lacinia justo ut tristique. Suspendisse orci tortor, auctor sed posuere nec, porta ac arcu. Nullam varius eleifend felis sed egestas. Mauris aliquam rhoncus risus, ut congue augue sollicitudin eget. Sed ullamcorper placerat eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce et tincidunt ligula. Integer malesuada ligula sit amet nulla dictum sed tincidunt elit scelerisque. Proin venenatis dolor hendrerit metus consectetur ornare. Nulla sed consectetur libero. Nunc feugiat fermentum enim, eget ornare lorem vehicula ac. Nam volutpat tortor a nisi interdum eu sagittis nibh dapibus. Phasellus aliquam ipsum nec sapien gravida auctor. Donec venenatis, magna ut tempus sollicitudin, nunc turpis lacinia metus, ac suscipit sem sem non nisi.
            Vivamus ac felis in sem scelerisque porttitor non non nunc. Cras quis ligula augue, non ornare felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eu neque orci. Aenean sit amet lorem tortor. Vivamus et elementum nisi. Sed rhoncus, enim vitae tristique fermentum, purus metus pharetra tellus, non pulvinar orci lectus eget sem. Maecenas vel leo ac nulla aliquam varius id id felis. Maecenas eu vulputate lorem. Sed tincidunt est a turpis gravida pulvinar ac quis augue. Cras pharetra lorem nec arcu lobortis vestibulum. Pellentesque dapibus consequat egestas. Ut aliquam lorem eget risus dictum quis sagittis purus tempus.
        </div>
    </body>
</html>
相关文章：