css 是否可以在console.log中在一个边框中输出多行?

hfwmuf9z  于 2023-01-18  发布在  其他
关注(0)|答案(2)|浏览(141)

我正在尝试使用以下样式创建console.log:

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

我想将两行都保留在一个边框中,但\n会生成两个边框:

b1zrtrql

b1zrtrql1#

这可能是帮助你,我会更新代码,如果有任何其他方法

open browser console to preview code
let css1 = 'border: 3px solid red; display:inline-block; padding:10px; white-space:pre;border-bottom:none';

let css2 = 'border: 3px solid red; display:inline-block; padding:10px; white-space:pre;border-top:none;margin-top:-8px';

console.log(`%cLine1`, css1);
console.log(`%cLine2`, css2);
szqfcxe2

szqfcxe22#

我想出了这个解决方案。它部分是受@dev.skas的启发。查看浏览器控制台以查看输出。

const styling = (marginTop) => {
return `border: 3px solid red; display:inline-block; padding:10px; white-space:pre;margin-top:-${marginTop}px`
}

console.log(`%cLine1`, styling(0));
console.log(`%cLine2`, styling(8));

相关问题