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

问题描述:

Fiddle - 我们有一些与headercontent的div。标题可能较短 - 1行,或更长2-3行。内容可能很长,需要为cutted将文本长度限制为其容器大小

如何切割它以取走所有剩下的地方,但没有更多。我一直在想这件事,而且我没有任何“干净”的想法。

+0

我试图了解您的目标是什么。你是说这个区域需要有一个固定的高度,如果文本继续超过固定高度的高度,那么该区域中会有一个滚动条? – Xarcell 2013-03-15 16:11:35

添加这个在您的续类证明属性:

text-align:justify; 

你想切长文本,以避免断线?如果我懂了,我做了一个简单的例子,它可以满足你的需求。根据您的字体大小调整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>