如何在console.log中用单个边框输出多行内容？

你想要实现带样式的console.log，让两行内容处于同一个红色边框内，但使用\n换行后出现了两个边框。你的原代码如下：

let style='border: 3px solid red; display:inline-block; padding:10px; white-space:pre;';
console.log(
    `%cLine1\nLine2`,
    style
);

问题原因 #

设置display: inline-block后，浏览器控制台会将换行后的文本拆分为多个独立的行内块元素，导致每行都生成一个边框。

解决方案 #

方法1：改为块级元素显示

将样式中的display: inline-block替换为display: block，这样整个文本内容会被渲染为一个单独的块级元素，换行仅作为文本内部的换行，不会分裂边框：

let style='border: 3px solid red; display:block; padding:10px; white-space:pre;';
console.log(
    `%cLine1\nLine2`,
    style
);

方法2：保留行内块并设置宽度

如果需要保持行内块特性，可以添加width: 100%确保元素占据整行，避免换行拆分：

let style='border: 3px solid red; display:inline-block; width:100%; padding:10px; white-space:pre;';
console.log(
    `%cLine1\nLine2`,
    style
);

内容的提问来源于stack exchange，提问作者Bas Broens