๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Lect & Tip/html, css, scss

๐Ÿ“Œ CSS ๋ง์ค„์ž„ : text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ๊ธ€์ž๋ฅด๊ธฐ width:auto. ์ œ๋ชฉ์ด ๊ธธ ๊ฒฝ์šฐ ...๋กœ ํ‘œ์‹œ

by ๋‚ฏ์„ ๊ณต๊ฐ„2019 2019. 6. 22.
๋ฐ˜์‘ํ˜•

๊ฒŒ์‹œํŒ์„ ๊ฐœ๋ฐœํ•  ๋•Œ ๊ท€์ฐฎ์€ ์ž‘์—…์ค‘์˜ ํ•˜๋‚˜๊ฐ€ ์ œ๋ชฉ์„ ๋ฆฌ์ŠคํŠธ ํญ์— ๋งž์ถฐ์„œ ๋ง์„ ์ค„์ด๋Š” ๊ฒƒ์ด๋‹ค. ์„œ๋ฒ„ ๋‹จ์—์„œ ๋ฏธ๋ฆฌ ๊ธธ์ด๋ฅผ ๊ณ„์‚ฐํ•ด์„œ ์ถœ๋ ฅํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ์‚ฌ์ดํŠธ ํŠน์„ฑ์ƒ ๊ฒŒ์‹œํŒ์˜ ์ข…๋ฅ˜๊ฐ€ ๋‹ค์–‘ํ•˜๋‹ค๊ฑฐ๋‚˜ ํ•˜๋ฉด, ์€๊ทผํžˆ ๊ท€์ฐฎ์€ ์••๋ฐ•์œผ๋กœ ๋‹ค๊ฐ€์˜ค๊ฒŒ ๋œ๋‹ค.

์ด๋Ÿด๋•Œ ์œ ์šฉํ•œ ๊ฒƒ์ดtext-overflow:ellipsis; white-space:nowrap; overflow:hidden; ์กฐํ•ฉ์ด๋‹ค.

์ด๊ฑธ ์“ฐ๋ฉด

<style>

.vf_ellipsis { overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; white-space:nowrap; position:relative; float:left; }

#vf_360 { width:auto; max-width:360px; }

</style>
<td class="t_po">

<p class="vf_ellipsis" id="vf_360">

๊ธˆํ˜ธ๋ฆฌ์กฐํŠธ 1์›” ํ–‰์‚ฌ ์•ˆ๋‚ด - ์ถ”๊ฐ€ํ• ์ธ ํ˜œํƒ๊ธˆํ˜ธ๋ฆฌ์กฐํŠธ 1์›” ํ–‰์‚ฌ ์•ˆ๋‚ด -์ถ”๊ฐ€ํ• ์ธ ํ˜œํƒ๊ธˆํ˜ธ๋ฆฌ์กฐํŠธ 1์›” ํ–‰์‚ฌ ์•ˆ๋‚ด - ์ถ”๊ฐ€ํ• ์ธ ํ˜œํƒ๊ธˆํ˜ธ๋ฆฌ์กฐํŠธ 1์›” ํ–‰์‚ฌ ์•ˆ๋‚ด - ์ถ”๊ฐ€ํ• ์ธ ํ˜œํƒ

</p>

<img src="./images/icon_new.gif" alt="new" class="vm" />

</td>

์ด๋ ‡๋˜ ๋…€์„์ด

์ด๋ ‡๊ฒŒ ๋ฐ”๋€๋‹ค.

์†Œ์Šค์—์„œ ๋ณผ๋“œ์ฒ˜๋ฆฌ ํ•ด๋‘” ๋ถ€๋ถ„์ด ์ค‘์š”ํ•œ ๋ถ€๋ถ„์ธ๋ฐ, vf_360์„ id๋กœ ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๊ฒŒ ํ–ˆ๊ณ , width:auto; ์†์„ฑ์„ ๋ถ€์—ฌํ–ˆ๋Š”๋ฐ,

๊ฒŒ์‹œํŒ๋“ค์€ ์ œ๋ชฉ์˜ ๊ธธ์ด๊ฐ€ ๋ณ€ํ•˜๋Š” ๊ฒƒ์— ๋”ฐ๋ผ์„œ ๋‹ค์Œ ๊ทธ๋ฆผ์ฒ˜๋Ÿผ new ์•„์ด์ฝ˜์ด ๋”ฐ๋ผ ๋ถ™์–ด์•ผ ํ•  ๋•Œ๊ฐ€ ์žˆ๋‹ค.

Width์†์„ฑ์„ ๋ช…์‹œํ•ด๋ฒ„๋ฆฌ๋ฉด new์•„์ด์ฝ˜์ด ์ƒ๋šฑ๋งž์€ ๋ฐ์— ๋†“์ด๋ฏ€๋กœ float:left์†์„ฑ์œผ๋กœ ์ œ๋ชฉ์˜ ๊ธ€ ๊ธธ์ด๊ฐ€ ์ค„์–ด๋“ค๊ณ  ๋Š˜์–ด๋‚˜๋Š” ๊ฒƒ์— ๋”ฐ๋ผ์„œ ์›€์ง์—ฌ์ฃผ์–ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— width:auto; ์†์„ฑ์„ ์‚ฌ์šฉํ•œ๋‹ค.

 

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€