欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

pre标签,保留原始文本结构,且自适应适配父容器高度和宽度

程序员文章站 2022-03-08 14:06:27
...

起因

某个业务场景中,我需要把用户输入的原始的内容结构展示出来,且要兼容展示页的容器自适应

代码

输入的时候,使用textArea标签收集用户输入的数据(不关心他怎么换行,多少空格,多少缩进,统统不关心,他输入什么,我数据库就存什么)
展示

.container{
	width: 678px;
    margin: 4px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 3px;
    padding: 10px 6px;
    overflow-y: auto;// 垂直方向 使用滚动条来兼容高度
}
.container pre{
	white-space: pre-wrap; 
    word-wrap: break-word; 
    // 水平方向 换行来兼容宽度,内容错位的话,会自动换行的。(顶多就是有点儿不好看,但是输入的时候应该限制一下)
}

// html 代码
<div class='container'>
	<pre> 数据库存的值 </pre>
</div>
相关标签: html