調整版面
This commit is contained in:
@@ -1384,27 +1384,7 @@ html, body, * {
|
||||
html = this.renderNameList(slice, el, 0);
|
||||
}
|
||||
else if (el.id === 'alive') {
|
||||
//console.log("createEl:", slice, el)
|
||||
//let perRow = Math.floor(Number(el.height) / Number(el.textHeight));
|
||||
//let rows = Math.ceil(Number(slice.length) / Number(perRow));//總行數
|
||||
//let rowWidth = Math.floor(Number(el.width) / rows);
|
||||
//fontSize = Math.floor(rowWidth / 2);
|
||||
//if (fontSize > el.style.fontSize) {
|
||||
// fontSize = el.style.fontSize;
|
||||
// rowWidth = fontSize * 2;
|
||||
//}
|
||||
//let th = Number(el.textHeight) || 0;
|
||||
//let span = Number(el.textSpan) || 0;
|
||||
//let h = Number(el.height);
|
||||
//let w = Number(el.width);
|
||||
|
||||
//let namesPerCol = Math.floor((h + span) / (th + span));
|
||||
//if (namesPerCol < 1) namesPerCol = 1;
|
||||
|
||||
//// 2. 計算總共會產生幾列 (cols),並推算出每個名字能分配到的最大欄寬
|
||||
//let cols = Math.ceil(slice.length / namesPerCol);
|
||||
//if (cols < 1) cols = 1;
|
||||
//let colWidth = Math.floor(w / cols);
|
||||
html = this.renderLiveList(slice, el);
|
||||
}
|
||||
else {
|
||||
@@ -1490,63 +1470,6 @@ html, body, * {
|
||||
let s = Number(el.style.fontSize);
|
||||
let sizes = [];
|
||||
|
||||
//// 1. 模擬排版:找出能讓全體塞入的最佳字體組合
|
||||
//while (s >= 12) {
|
||||
// let short_s_px = s * 1.333;
|
||||
// let long_s = Math.floor(s * 0.75); // 長字體最多縮小 25%
|
||||
// if (long_s < 12) long_s = 12;
|
||||
// let long_s_px = long_s * 1.333;
|
||||
|
||||
// let currentColHeight = 0;
|
||||
// let totalWidth = 0;
|
||||
// let tempSizes = [];
|
||||
|
||||
// for (let i = 0; i < names.length; i++) {
|
||||
// let name = names[i];
|
||||
// let l = name.length;
|
||||
// let isMulti = (l * short_s_px) > th;
|
||||
|
||||
// let size = isMulti ? long_s : s;
|
||||
// let size_px = isMulti ? long_s_px : short_s_px;
|
||||
|
||||
// tempSizes.push({ name: name, size: size, isMulti: isMulti });
|
||||
|
||||
// if (isMulti) {
|
||||
// // 多行長名
|
||||
// let charsPerCol = Math.floor(h / size_px);
|
||||
// if (charsPerCol < 1) charsPerCol = 1;
|
||||
// let lines = Math.ceil(l / charsPerCol);
|
||||
// let nameW = lines * (size_px * 1.1); // 1.1倍行距
|
||||
|
||||
// if (currentColHeight > 0) currentColHeight = 0;
|
||||
// totalWidth += nameW + gap;
|
||||
// } else {
|
||||
// // 單行短名
|
||||
// if (currentColHeight > 0 && (currentColHeight + th + gap) <= h) {
|
||||
// currentColHeight += th + gap;
|
||||
// } else {
|
||||
// currentColHeight = th;
|
||||
// totalWidth += short_s_px + gap;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (totalWidth > 0) totalWidth -= gap;
|
||||
|
||||
// // 總寬度未爆框,確定最佳組合
|
||||
// if (totalWidth <= w) {
|
||||
// sizes = tempSizes;
|
||||
// break;
|
||||
// }
|
||||
// s -= 1;
|
||||
//}
|
||||
|
||||
//// 處理極端情況
|
||||
//if (sizes.length === 0) {
|
||||
// sizes = names.map(name => {
|
||||
// return { name: name, size: 12, isMulti: (name.length * 12 * 1.333) > th };
|
||||
// });
|
||||
//}
|
||||
// 1. 模擬排版:找出能讓全體塞入的最佳字體組合
|
||||
while (s >= 12) {
|
||||
let short_s_px = s * 1.333;
|
||||
@@ -1806,7 +1729,7 @@ html, body, * {
|
||||
display: "block",
|
||||
"min-height": `${th}px`, // ★ 固定分配高度,交給 Flexbox 自動排版
|
||||
"max-height": `${el.height}px`,
|
||||
width: `${fontSize * 1.33}`,
|
||||
width: "auto",//`${fontSize * 1.33}`,
|
||||
//"line-height": "1.1",
|
||||
"text-align": "justify", // 統一分散對齊
|
||||
"text-align-last": "justify",
|
||||
|
||||
Reference in New Issue
Block a user