Tôi có một chiều cao cố định và chiều rộng chất lỏng (15% của chiều rộng body) div. Tôi muốn đoạn văn bản bên trong hoàn toàn điền vào số div; không tràn và không lấp đầy.Thay đổi kích thước văn bản thành thùng chứa hoàn toàn đầy đủ
Tôi đã thử với jQuery để tăng kích thước văn bản cho đến khi chiều cao của đoạn bằng với chiều cao của vùng chứa div. Tại thời điểm đó, văn bản phải hoàn toàn bao gồm div. Vấn đề duy nhất là tăng kích thước phông chữ trong các giá trị 0,5px. Bạn không thể làm 33.3px; nó phải là 33,0px hoặc 33,5px. Vì vậy, ở 33px, văn bản của tôi quá ngắn để che phủ div và ở mức 33,5px nó tràn.
Có ai có ý tưởng nào về cách khắc phục điều này không? Có rất nhiều plugin để làm cho văn bản lấp đầy toàn bộ chiều rộng của vùng chứa, nhưng không phải cho văn bản phải điền cả chiều rộng và chiều cao. Ít nhất, không có gì mà tôi đã nhìn thấy.
<head>
<style type="text/css">
.box {
display:block;
position:relative;
width:15%;
height:500px;
background:orange;
}
.box p {
background:rgba(0,0,0,.1); /* For clarity */
}
</style>
</head>
<body>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br><br>
Suspendisse varius nibh quis urna porttitor, pharetra elementum nisl egestas. Suspendisse libero lacus, faucibus id convallis sit amet, consequat vitae odio.</p>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function responsiveText(){
var i = 0.5;
do {
$(".box p").css("font-size",(i) + "px");
var textHeight = $(".box p").height(),
containerHeight = $(".box").height();
i += 0.5;
} while (textHeight < containerHeight); // While the height of the paragraph block is less than the height of the container, run the do...while loop.
} responsiveText();
$(window).resize(function(e) {
responsiveText();
});
</script>
</body>
Văn bản được đặt ở 33px. Nó quá ngắn.
Văn bản được đặt ở 33,5px. Nó tràn.
Tìm kích thước phông chữ lớn nhất phù hợp (ví dụ của bạn trong ví dụ 33px) sau đó nhấn mạnh với 'dòng-chiều cao' để làm cho văn bản phù hợp chính xác hơn? – RichieHindle
@RichieHindle Thú vị. Điều duy nhất là mã tôi thực hiện đặt kích thước phông chữ ở 33,5px vì ở 33px, đoạn văn chưa cao bằng container ... –
Bạn cần phải lùi lại một bước khi bạn phát hiện tràn. Sau đó, làm một vòng lặp tương tự để tăng 'line-height', một lần nữa lùi lại bởi một bước khi nó tràn. – RichieHindle