当用户输入文本区域时,由于换行而导致的换行看起来与由于用户输入换行符而导致的换行相同。我希望换行符之后的第一行的间距比换行的间距稍远一些。这个想法是,用户正在输入文本段落,然后按 Enter 键开始一个新段落。段落开始的位置应该在视觉上很明显。
我可能可以使用 JavaScript 来实现这种效果,将每个换行符替换为用户输入的两个换行符,但我希望使用 CSS 来实现。
您可以使用
<div contenteditable>
进行某种富文本编辑。通常这有点棘手并且跨浏览器不一致。但对于新行,我认为这个 CSS 会起作用。
var elem = document.querySelector(".my-textarea");
elem.focus();
.my-textarea {
border: 1px solid gray;
height: 150px;
width: 200px;
padding: 10px;
overflow: auto;
}
.my-textarea * {
margin-top: 1rem;
}
Enter Description:
<div class="my-textarea" contenteditable></div>