前端开发小技巧 - 【CSS】- 表单控件的 placeholder 如何控制换行显示?

表单控件的 placeholder 如何换行展示?

  • HTML 中,<textarea> 元素的 placeholder 属性默认情况下不支持换行。
  • 不过,可以通过以下几种方法来实现换行效果:

模版字符串

  • 模板字符串可以轻松地创建多行字符串,而不需要使用换行符 \n

    typescript 复制代码
    const message = `这是一个多行字符串。
    可以方便地包含换行。`
    console.log(message)

使用 CSS

  • 可以使用 CSS 来模拟换行效果。

  • 通过设置 white-space: pre-wrap;word-wrap: break-word; 可以让 placeholder 文本换行。

    css 复制代码
    textarea::placeholder {
        white-space: pre-wrap; /* 保留空白符序列,但是正常地进行换行 */
        word-wrap: break-word; /* 在长单词或 URL 地址内部进行换行 */
    }

使用 JavaScript

  • 可以通过 JavaScript 动态地设置 placeholder,并在其中包含换行符 \n。不过,这种方法在某些浏览器中可能不被支持。

    javascript 复制代码
    document.querySelector('textarea').setAttribute('placeholder', '第一行\n第二行');

使用 HTML 实体

  • 可以使用 HTML 实体 &#10;&#13; 来表示换行符,但这在 placeholder 中可能不会生效。

    html 复制代码
    <textarea placeholder="第一行&#10;第二行"></textarea>

使用 title 属性

  • 如果上述方法都不适用,你可以考虑使用 title 属性来显示多行文本提示。

    html 复制代码
    <textarea title="第一行 第二行"></textarea>
  • 请注意,不同浏览器对这些方法的支持程度可能有所不同,因此在实际应用中需要进行兼容性测试。

相关推荐
拾光拾趣录24 分钟前
从“祖传”构造函数到 `class`
前端·javascript
wmm_会飞的@鱼28 分钟前
FlexSim-汽车零部件仓库布局优化与仿真
服务器·前端·网络·数据库·数学建模·汽车
yvvvy30 分钟前
从“按钮都不会点”到“能撸大厂 UI”:我用 react-vant 踢开组件库的大门!
前端·javascript
安然dn31 分钟前
Cropper.js:JS图像裁剪库
前端·javascript
Serendipity26133 分钟前
微服务架构
前端·微服务
Hilaku1 小时前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
南岸月明1 小时前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
睡不着先生1 小时前
CSS `@scope` 实战指南:开启局部样式隔离新时代
css
Danny_FD1 小时前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip1 小时前
闭包实现一个简单Vue3的状态管理
前端·javascript