43181


![スタイル付きconsole.log](https://i.stack.imgur.com/CEKnh.png)

↑の開発者ツールのスクリーンショットのように、  
console.logでは二番目以降の引数を使ってスタイルを当てられます。

が、改行を含む文字列にスタイルを当てようとすると変なことになります。

* * *

Chrome(65.0.3325.181, 64bit macOS)ではなぜか二行目に文字が移動し、

![](https://i.stack.imgur.com/c30mG.png)

* * *

Firefox(59.0.2, 64bit macOS)では余計な空白が入ります。

![](https://i.stack.imgur.com/dQpQe.png)

どっちも変な挙動に思えるのですが、スタイル指定の仕方が間違っているのでしょうか。  
普通に表示させるための何か迂回策などあるでしょうか。


CC BY-SA 3.0
2018-04-12T02:19:03.347
43175
2018-04-12T06:33:56.083
2244
question
javascript google-chrome firefox
console.logで改行を含んだ文字列にスタイルを付けると配置がおかしい


Consoleでスタイルつけるとブロック化されるのか何かで括られたような挙動になります。  
FireFoxではスタイル付きとスタイル無しの間に空白(ブロック区切り？)が開くので  
`console.log('%ca%cbc\ndef', 'color:red', 'background-color:#ffffff')`  
としては如何でしょうか？

Chromeはなぜかブロックが横並びになったような感じになりますね。  
`console.log("%ca%cbc\ndef", "background-color:#ffaaaa", "background-
color:#aaaaff");`  
コメントで@sakmas さんが仰っているように不具合のようです。


CC BY-SA 3.0
2018-04-12T06:33:56.083
43181
2018-04-12T06:33:56.083
43175
answer