01/10/2018, 09:15
[Hỏi khó] Text tự động chỉnh kích thước cho vừa vặn width hoặc height trong html
Ví dụ mình có html thế này:
<body>
<div id='displayed-number-div' class="clearfix">
<p id='displayed-number'>123456789</p>
</div>
</body>
Và css thế này:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#displayed-number-div {
height: 100%;
display: table;
width: 100%;
}
#displayed-number {
margin: 0;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
white-space: nowrap;
font-size: 40vh;
border-width: 5px;
border-style: dashed;
}
Liệu có cách nào để con số trong thẻ < p >có thể tự động thay đổi font-size cho khớp với thẻ < div > không, mình đã thử tạo ra 1 thẻ tạm rồi liên tục thử size lên nó, nhưng mà performance quá chậm.
Bài liên quan
Khớp thẻ div là sao bạn? Ý bạn đang muốn dùng trong trg hợp nào thế? Mobile hả?
Bạn đã thử cách tính toán lại font size khi sự kiện resize chưa?
Chả là mình muốn viết lại ứng dụng này (C#) lên web để học lập trình web tĩnh, lúc trước mình dùng vòng lặp để test size nên chưa tối ưu, lên web thì lag do lặp nhiều quá , với trên web không có API measureString (hoặc là mình không biết) Vừa mới nãy mình chợt nghĩ ra cách mới không cần lặp
Đây là ứng dụng C# của mình, chỉ là tạo số ngẫu nhiên với bấm giờ thôi, nhưng có thể kéo size cửa sổ, dòng chữ to thì responsive theo size cửa sổ https://drive.google.com/open?id=0B3ZsTwfasKZxM1RjYUNXSXEzQ2c
Giờ mình chỉ cần cái gì đó thay thế được measureString này https://msdn.microsoft.com/en-us/library/6xe5hazb(v=vs.110).aspx
C# theo mình biết k có web, bạn có thể đưa ý tưởng lên nhưng cú pháp (syntax) thì không.
Và vì thế mà bạn cần học thêm html, css, js để làm web, vì đây là những cái chính ở web.
Mình chưa run file của bạn nên k biết nó thế nào nhưng theo ý tưởng thì như thế này có ddc k?
Screencast.com
2017-04-14_2342
Shared from Screencast.com
Mình chỉ muốn text tự co dãn cho vừa với parent element thôi. Mà mình có thuật toán rồi, giờ chỉ cần cái gì đó để measure string cho nhanh.
vòng lặp là i = 1 2 3 4 … n à? Viết lại vòng lặp bằng tìm kiếm nhị phân chắc cũng lẹ mà
ví dụ font vừa vặn có size là 78px. Bắt đầu với 1px (thiếu), nhân 2 lên 2px (thiếu), 4px (thiếu), 8px (thiếu), 16px (thiếu), 32px (thiếu), 64px (thiếu), 128px (dư) => có được low=64, high=128, rồi tìm kiếm nhị phân là ra: 96 -> 80 -> 72 -> 76 -> 78. Làm vậy đo 8 + 5 = 13 lần thay vì 78 lần, nhanh hơn kha khá
tạo 1 cái html5 canvas rồi xài measureText():
stackoverflow.com
Calculate text width with JavaScript
thì hình của mình nó vừa rồi đấy.
quan trọng là trên html thì việc match parent element đã có css làm, bạn k phải tính gì cả.
Đâu có được đâu nhỉ:
Nhưng mà may quá, mình tìm ra cách rồi, dùng measureText của canvas, kèm với thuật toán test size (thuật toán mới, không cần vòng lặp) là xong, cảm ơn bạn tntxtnt nhiều
style để khác hẳn thế kia thì làm sao được.
bạn có đáp án rồi thì tick chọn đáp án của bạn tntxtnt làm solution nhé