๐ง๐ผ๋ด ๋ฐฉ์
/* ๊ณตํต ๊ฒ์ํ */ .board { position: relative; } .board__list { list-style: none; padding-left: 0; } .board__item { display: flex; flex-flow: row nowrap; justify-content: space-between; } .board__link { width: 80%; display: block; line-height: 25.6px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .board__more { position: absolute; top: 0; right: 0; }
ํ ์คํธ๊ฐ ๋์น๋ฉด ...์ผ๋ก ํ์
๐ฉ๐ผโ๐ซ ๊ฐ์ฌ๋ ๋ฐฉ์.board__item { display: flex; flex-flow: row nowrap; } .board__link { /* ๋น๊ณต๊ฐ๋งํผ ์๋ฆฌ ์ฐจ์ง */ flex-grow: 1; /* ๊ฐํ ๊ธ์ง */ white-space: nowrap; /* ํ ์คํธ๊ฐ ๋์น๋ฉด ...์ผ๋ก ํ์ */ overflow: hidden; text-overflow: ellipsis; background-color: aqua; } .board__date { /* ์๋ฆฌ ์ถ์ */ flex-shrink: 0; }
<ol class="favorite__list"> <li class="favorite__item"> <a href="#" data-tooltip="๋ ์ด์์์ ๋ฐฐ์ฐ์" class="favorite__link"> <span class="fas fa-external-link-alt accentFavorite" aria-hidden="true"></span> Learn CSS Layout</a> </li> <li class="favorite__item"> <a href="#" data-tooltip="๊ฒ์ด๋จธ์ฒ๋ผ flex" class="favorite__link"> <span class="fas fa-external-link-alt accentFavorite" aria-hidden="true"></span> Flexbox Froggy</a> </li> <li class="favorite__item"> <a href="#" data-tooltip="๋์ฅ์ฃผ ๋๊ธฐ Grid " class="favorite__link"> <span class="fas fa-external-link-alt accentFavorite" aria-hidden="true"></span> CSS Grid Garden</a> </li> <li class="favorite__item"> <a href="#" data-tooltip="์ต๊ณ ์ ์น๊ต๊ณผ์ MDN" class="favorite__link"><span class="fas fa-external-link-alt accentFavorite" aria-hidden="true"></span> MDN Web Docs</a> </li> </ol>
data-tooltip
์ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์ ์ ์ ์์ฑ์ ๋ง๋ค ์ ์๋ค..favorite__link:hover::after { /* a์ ํ ๋นํ ์ ์์๋ ํ ์คํธ๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ */ content: attr(data-tooltip); position: absolute; top: 0.5em; margin-left: 1em; background-color: #000; color: #fff; padding: 0.5em; opacity: 1; border-radius: 5px; font-size: var(--text-sm); }
attr(data-tooltip)
๋ฅผ ์ฌ์ฉํ๋ฉด li ๊ฐ์๋งํผli::nth-child
์์ฑ์ ์ฌ์ฉํ์ง ์์๋ ๊ฐ๊ฐ์ ํ ์คํธ๋ฅผ ๋ถ๋ฌ์ฌ ์ ์๋ค.
.twitter__userInfo { background-color: burlywood; margin-top: var(--spacing-sm); display: flex; }
โ ๏ธ ์ด๋ฏธ์ง๋ฅผtwitter__userInfo
์์ ์์ํ๊ฒ ํ๊ณ ์ถ์๋ฐflex
๋ ๋ฐ์ค ๋ชจ๋ธ์ด๋ผ ์ด๋ฏธ์ง๊ฐ ์ฌ๋ผ์ค์ง ๋ชปํ๋ค..twitter__userInfo { background-color: burlywood; margin-top: var(--spacing-sm); display: inline-flex;
โ ํด๊ฒฐ ๋ฐฉ์
์ด ์์ฑ์ ์์๋ฅผ ์ํ์ผ๋ก ๋ฐฐ์ดํ๋ ํ๋ ์ค ์ปจํ ์ด๋๋ฅผ ์์ฑํ๋ฉฐ, ์์๋ค์ ํ๋ ์ค ์์ดํ ์ผ๋ก ํฌํจ์ํจ๋ค.
์ผ๋ฐ์ ์ผ๋ก ๋ธ๋ก ๋ ๋ฒจ ์์๋ ํ ์ค์ ์ฐจ์งํ๊ฒ ๋์ง๋ง, ์ธ๋ผ์ธ-ํ๋ ์ค๋ฅผ ์ฌ์ฉํ๋ฉด ํ๋ ์ค ์ปจํ ์ด๋์ ํ๋ ์ค ์์ดํ ๋ค์ด ์ธ๋ผ์ธ ์์์ฒ๋ผ ์ทจ๊ธ๋์ด ์์ญ์ ์ฐจ์งํ์ง ์๊ณ ํ๋ฆ์ ๋ฐ๋ผ ๋ฐฐ์น
ํน์ง
width: 20%;
min-width: 60px;
max-width: 80px;
/* min-w w max-w */
width: clamp(60px, 20%, 80px);