正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

We're getting closer 🤏 input, textarea { field-sizing: content; } Auto-resizing text inputs with one line of CSS 🚀

jhey ʕ•ᴥ•ʔ

145,938 subscribers

204,378 次观看 • 2 年前 •via X (Twitter)

教育艺术科学技术

Anya Rossi• Live Now

Private livecam show

10 条评论

Pacorro 的头像

Pacorro2 年前

that border thing detail

Kaspar Püüding 的头像

Kaspar Püüding2 年前

Wow, only multi-line truncation left and the web is perfect?

Jon Sutherland 的头像

Jon Sutherland2 年前

Will max height work for it to then scroll?

jhey ▲🐻🎈 的头像

jhey ▲🐻🎈2 年前

Yep – You can constrain it with a max number of lines and then set up the scrollbar for it 🤙

Kyle TechSquidTV 的头像

Kyle TechSquidTV2 年前

That's magic.

Christian Williams 的头像

Christian Williams2 年前

much needed, I have wrote this a million types in js

Justin 的头像

Justin2 年前

I need this now

Jikku Jose 的头像

Jikku Jose2 年前

I was thinking it requires JS!

Bug Buster 🐞 CLONE 的头像

Bug Buster 🐞 CLONE2 年前

How did you create that border effect, @jh3yy ?

Bug Buster 🐞 CLONE 的头像

Bug Buster 🐞 CLONE2 年前

Do you have a YouTube channel?

相关视频

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

319,151 次观看 • 2 年前

auto-growing <textarea> without JavaScript! CSS is getting field-sizing: content; to size inputs by their contents. Dropped in Chrome Canary today, demo here:

auto-growing <textarea> without JavaScript! CSS is getting field-sizing: content; to size inputs by their contents. Dropped in Chrome Canary today, demo here:

Wes Bos

203,517 次观看 • 2 年前

TIL about `field-sizing: content` in css

TIL about `field-sizing: content` in css

Jonnie Hallman

150,898 次观看 • 1 年前

¡POR FIN se puede hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "field-sizing: content" Soporte del 72% en navegadores. Mira la demo:

¡POR FIN se puede hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "field-sizing: content" Soporte del 72% en navegadores. Mira la demo:

Miguel Ángel Durán

111,424 次观看 • 10 个月前

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)

Adam Argyle

92,826 次观看 • 6 个月前

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

jhey ʕ•ᴥ•ʔ

43,591 次观看 • 1 年前

very cool – scale text to fit width w/ 1 line of css 🧑‍🍳 a { text-grow: per-line/consistent scale; } great for link blocks, hero text, etc. [flagged in Chrome ⛳]

very cool – scale text to fit width w/ 1 line of css 🧑‍🍳 a { text-grow: per-line/consistent scale; } great for link blocks, hero text, etc. [flagged in Chrome ⛳]

jhey ʕ•ᴥ•ʔ

51,106 次观看 • 5 个月前

🔥 3 CSS tips for styling <textarea> you probably didn't know about

🔥 3 CSS tips for styling <textarea> you probably didn't know about

Wes Bos

111,608 次观看 • 2 年前

We're getting closer to launch day. Be first in line for Ethereum's first Supermarket 👀

We're getting closer to launch day. Be first in line for Ethereum's first Supermarket 👀

Superseed

17,878,804 次观看 • 3 个月前

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jhey ʕ•ᴥ•ʔ

51,127 次观看 • 1 年前

GLM-4.6V can accept multimodal inputs of various types and automatically generate high-quality, structured image-text interleaved content.

GLM-4.6V can accept multimodal inputs of various types and automatically generate high-quality, structured image-text interleaved content.

Z.ai

13,655 次观看 • 6 个月前

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

Wes Bos

23,420 次观看 • 1 年前

messin' with text using CSS + SVG 🤌

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 次观看 • 1 年前

✨We're getting closer and closer! #BlueProtocolStarResonance #StarResonance #BPSR

✨We're getting closer and closer! #BlueProtocolStarResonance #StarResonance #BPSR

Star Resonance Database

19,515 次观看 • 11 个月前

we're getting closer inches away..

we're getting closer inches away..

🥯

15,994 次观看 • 2 年前

We're getting closer to a Mario Kart with 101 players... #nintendo #mariokartworld

We're getting closer to a Mario Kart with 101 players... #nintendo #mariokartworld

Hat-Loving Gamer

24,521 次观看 • 1 年前

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

111,954 次观看 • 1 年前

works great on blocks of text too 🤙 .text { --duration: calc(var(--text-length) * 0.12s); animation: shimmer var(--duration) infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } } animation-duration maps to the text length using CSS custom properties 🚀

works great on blocks of text too 🤙 .text { --duration: calc(var(--text-length) * 0.12s); animation: shimmer var(--duration) infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } } animation-duration maps to the text length using CSS custom properties 🚀

jhey ʕ•ᴥ•ʔ

100,165 次观看 • 1 年前

One step closer. 🚀🚀🚀🚀🚀🚀🚀🚀

One step closer. 🚀🚀🚀🚀🚀🚀🚀🚀

Mark Federschmidt

32,762 次观看 • 1 个月前

Bark Text-to-Audio Model Full Text Input: "Why was six afraid of seven?" Ignore Bark's "I'm done with this input" token and tell Bark to just keep generating more audio anyway.

Bark Text-to-Audio Model Full Text Input: "Why was six afraid of seven?" Ignore Bark's "I'm done with this input" token and tell Bark to just keep generating more audio anyway.

Jonathan Fly 👾

461,776 次观看 • 3 年前