is it possible to output muliple lines in console.log in one border?-CodePudding

I'm trying to get a console.log with styling like this:

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

I would like to keep both lines in 1 border, but the \n makes two borders:

CodePudding user response：

This may be help you I will update code if there is any another method

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);

CodePudding user response：

I came up with this solution. It is in part inspired by @dev.skas's answer. See the browser console to see the output.

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));