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.

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?

2 Likes

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á :joy: , 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 :grin:
Đâ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?

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():

2 Likes

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 :heart_eyes:

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é :wink:

1 Like
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?