將文本長度限制爲其容器大小

-1

Fiddle - 我們有一些與header和content的div。標題可能較短 - 1行，或更長2-3行。內容可能很長，需要爲cutted。將文本長度限制爲其容器大小

如何切割它以取走所有剩下的地方，但沒有更多。我一直在想這件事，而且我沒有任何「乾淨」的想法。

2013-03-15 OPOPO

我試圖瞭解您的目標是什麼。你是說這個區域需要有一個固定的高度，如果文本繼續超過固定高度的高度，那麼該區域中會有一個滾動條？ – Xarcell 2013-03-15 16:11:35

添加這個在您的續類證明屬性：

text-align:justify;

來源

2013-03-15 15:57:23

你想切長文本，以避免斷線？如果我懂了，我做了一個簡單的例子，它可以滿足你的需求。根據您的字體大小調整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>

來源

2013-03-15 22:58:35

將文本長度限制爲其容器大小

回答

相關問題