์ธํŒŒ

You Can Become A

๋Šฆ๊ฒŒ ์‹œ์ž‘ํ•ด๋„ ๋ˆ„๊ตฌ๋“ ์ง€ ๋…ธ๋ ฅํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ ์ˆ˜ ์žˆ์–ด์š” !

์  3๊ฐœ

๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค
CSS ์Šค๋‹ˆํŽซ

๐Ÿš€ ํ…์ŠคํŠธ ๋ง์ค„์ž„ํ‘œ(...) ๊ฐ„๋‹จ ์ ์šฉํ•˜๊ธฐ

๊ธ€์ž ellipsis ์ ์šฉํ•˜๊ธฐ ์ผ์ •ํ•œ ์˜์—ญ ๋‚ด์— ๋ฌธ๋‹จ์„ ๋„˜์น˜์ง€ ์•Š์œผ๋ฉด์„œ ์ƒ๋žต ๊ธฐํ˜ธ๋ฅผ ์“ฐ๊ณ  ์‹ถ์–ด ๋ง์ค„์ž„ํ‘œ(...)๋ฅผ ์ ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด, CSS ์†์„ฑ์˜ text-overflow: ellipsis ๋ฅผ ์ ์šฉํ•˜๋ฉด ๋œ๋‹ค. ๋‹ค๋งŒ ์ด ์†์„ฑ์„ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„  ๋ช‡๊ฐ€์ง€ ์‚ฌ์ „ ์ž‘์—…์ด ๊ผญ ํ•„์š”ํ•˜๋‹ค. ์ ์šฉํ•  ํ•ด๋‹น ์š”์†Œ๋Š” display ์†์„ฑ์ด block / inline-block ์ด์–ด์•ผ ํ•œ๋‹ค (๊ทธ๋ž˜์•ผ width๋ฅผ ์ ์šฉํ• ์ˆ˜๊ฐ€ ์žˆ๋‹ค) ์ ์šฉํ•  ํ•ด๋‹น ์š”์†Œ๋Š” width๋ฅผ ์ง€์ •ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค. (๊ทธ๋ž˜์•ผ ๋„˜์น˜๋Š” ๊ธฐ์ค€์„ ์ •ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค) ์ ์šฉํ•  ํ•ด๋‹น ์š”์†Œ๋Š” overflow๊ฐ€ hidden ์ด์–ด์•ผ ํ•œ๋‹ค. (๊ทธ๋ž˜์•ผ ๋„˜์น˜๋Š” ๋ถ€๋ถ„์ด ๊ฐ€๋ ค์ง€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค) ๋งˆ์ง€๋ง‰์œผ๋กœ text-overflow๋ฅผ ellipsis ๋กœ ์ฒ˜๋ฆฌํ•˜๋ฉด ๋œ๋‹ค ์‹ฑ๊ธ€ ๋ผ์ธ ๋ง์ค„์ž„ํ‘œ ์ ์šฉ .elli..

category_image
์ธํŒŒ_
2023.03.11
3