๋ฐ˜์‘ํ˜•

๊ธด๋‹จ์–ด์ฒ˜๋ฆฌ๋ฐฉ๋ฒ• 1

[CSS] ๊ธด ๋‹จ์–ด ์ฒ˜๋ฆฌ ์‹œ ์ค„๋ฐ”๊ฟˆ ๊ธฐ์ค€ ์ •ํ•˜๋Š” ๋ฐฉ๋ฒ• (๋‹จ์–ด ๊ธฐ์ค€ / ํ•œ ๊ธ€์ž ๊ธฐ์ค€)

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” CSS์—์„œ ๊ธด๋‹จ์–ด ์ฒ˜๋ฆฌ ์‹œ ์ค„๋ฐ”๊ฟˆ ๋‹จ์–ด ๊ธฐ์ค€์„ ์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. How to solve the problem ์•„๋ž˜์˜ html์ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ด…์‹œ๋‹ค. {item.desc} ์ฒ˜์Œ์— ์ œ๊ฐ€ ์ ์šฉํ•œ CSS๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋‹จ์–ด ๋’ค์— elispsis ์ฒ˜๋ฆฌ๋Š” ๋˜์—ˆ์ง€๋งŒ, ์ค„๋ฐ”๊ฟˆ ์ฒ˜๋ฆฌ๊ฐ€ ์ œ๋Œ€๋กœ ์•ˆ๋˜๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. > p { margin-bottom: 8rem; font-size: 10rem; line-height: 1.3; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; } ๋”ฐ๋ผ์„œ ์ €๋Š” word-break๋ผ๋Š” ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ break-all ๋กœ ์ง€์ •ํ•ด์คฌ์Šต๋‹ˆ..

Programming/CSS 2023.03.30
๋ฐ˜์‘ํ˜•