写在最前
最近在做一个项目,碰到一个问题,其应用场景十分常见,类似于发微博的效果。
问题
比如我在编辑时:
在内容编辑时,使用简单的 <textarea>
进行内容的获取,其中添加分段、空格等样式。
需求
我需要将编辑的内容原样展示,如果一行内容过多时,进行自动换行处理,且可以实现 \n
的手动换行
比如这样展示:
解决方案
-
使用
<pre>
标签<pre>
标签可定义预格式化的文本。被包围在
<pre>
标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。但是有个问题,该标签是无法实现自动换行的,当填写的内容过多时,它仍然在一行展示,将会出现滚动条,这并不是我所想要的效果。
此时可以看我的第二个方案。只需一行代码即可实现该效果。
-
使用
<div>
标签<div class="content">第一行内容\n第二行内容\n第三行内容\n<div>
添加样式如下:
.content{ white-space: pre-line; } // 如果需要给他限制最大高度时,可使用如下代码: .content{ max-height: 350px; overflow: auto; white-space: pre-line; }
轻松一行代码即可实现该发布效果。
补充:
考虑到会有英文的情况,如果担心不会实现自动换行的话,可以加上这个属性:word-wrap: break-word;
.content{ max-height: 350px; overflow: auto; white-space: pre-line; }
写在最后
✨ 原 创 不 易 , 还 希 望 各 位 大 佬 支 持 一 下 \textcolor{blue}{原创不易,还希望各位大佬支持一下} 原创不易,还希望各位大佬支持一下
👍 点 赞 , 你 的 认 可 是 我 创 作 的 动 力 ! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!
⭐️ 收 藏 , 你 的 青 睐 是 我 努 力 的 方 向 ! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!
✏️ 评 论 , 你 的 意 见 是 我 进 步 的 财 富 ! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!