<ul class="list"> <!-- <li class="item"> <p class="title -compress -ellipsis">あいうえお</p> </li> --> </ul>
.list { display: flex; flex-wrap: wrap; padding: 10px; } .list > .item { margin: 10px; } .item { width: 75px; height: 30px; box-shadow: 0 1px 3px rgba(0,0,0,.3); background-color: white; } .item > .title { overflow: hidden; text-align: center; line-height: 30px; } .title.-compress { letter-spacing: -4px; } .title.-ellipsis { white-space: nowrap; text-overflow: ellipsis; }
const list = document.getElementsByClassName('list')[0]; const generateTitle = i => { const chars = ['あ', 'い', 'う', 'え', 'お']; let title = ''; [...Array(i)].forEach((a, j) => title += chars[j % 5]); return title; }; // テキストの幅を取得 const getTextWidth = text => { const span = document.createElement('span'); span.innerText = text; span.style.visibility = 'hidden'; document.body.appendChild(span); setTimeout(() => { document.body.removeChild(span); }, 100); return span.offsetWidth || 0; }; const main = () => { [...Array(10)].forEach((a, i) => { const item = document.createElement('li'); item.classList.add('item'); const title = document.createElement('p'); title.classList.add('title'); const text = generateTitle(i + 1); const width = getTextWidth(text); if (80 <= width && width <= 96) { // 5〜6文字 title.classList.add('-compress'); } else if (96 < width) { // 7文字以上 title.classList.add('-compress', '-ellipsis'); } title.innerText = text; item.appendChild(title); list.appendChild(item); }); }; main();