[{"data":1,"prerenderedAt":621},["ShallowReactive",2],{"article-bag-html-break-tag":3},{"id":4,"title":5,"body":6,"category":606,"createdAt":608,"description":609,"extension":610,"index":611,"meta":612,"navigation":406,"path":613,"publish":406,"seo":614,"series":611,"seriesTitle":611,"stem":615,"tag":616,"thumbnail":619,"updatedAt":611,"__hash__":620},"articles\u002Farticles\u002Fbag-html-break-tag.md","white-space： pre;で要素内で生じる文章の隙間、インテンドの原因。",{"type":7,"value":8,"toc":604},"minimark",[9,18,24,27,255,269,284,292,419,425,428,431,594,600],[10,11,12,13,17],"p",{},"こんにちはjunです。ある日、vue.jsを使用して",[14,15,16],"code",{},"textarea","の中の文章をリアルタイムにレンダーするような機能を実装しました。その時、改行文章に謎のインテンドが入り、困りました。こんな感じです。",[19,20],"image-render",{":src":21,":width":22,":center":23},"'_mix\u002Fsch-2021-05-04 21.53.14.png'","'300px'","true",[10,25,26],{},"ソースは以下の感じ（かなり簡略化してます。）",[28,29,34],"pre",{"className":30,"code":31,"language":32,"meta":33,"style":33},"language-vue shiki shiki-themes material-theme-ocean","\u003Ctemplate>\n\u003Cdiv>\n    \u003Cdiv style=\"white-space:pre;\">\n        {{test}}\n        \u003Ctextarea v-model=\"test\"cols=\"30\" rows=\"10\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\nexport default {\n    data(){\n        return{\n            test:''\n        }\n    }\n}\n\u003C\u002Fscript>\n","vue","",[14,35,36,52,62,88,95,146,156,166,175,185,198,207,216,228,234,240,246],{"__ignoreMap":33},[37,38,41,45,49],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"sAklC","\u003C",[37,46,48],{"class":47},"s-wAU","template",[37,50,51],{"class":43},">\n",[37,53,55,57,60],{"class":39,"line":54},2,[37,56,44],{"class":43},[37,58,59],{"class":47},"div",[37,61,51],{"class":43},[37,63,65,68,70,74,77,80,84,86],{"class":39,"line":64},3,[37,66,67],{"class":43},"    \u003C",[37,69,59],{"class":47},[37,71,73],{"class":72},"sJ14y"," style",[37,75,76],{"class":43},"=",[37,78,79],{"class":43},"\"",[37,81,83],{"class":82},"sfyAc","white-space:pre;",[37,85,79],{"class":43},[37,87,51],{"class":43},[37,89,91],{"class":39,"line":90},4,[37,92,94],{"class":93},"s0W1g","        {{test}}\n",[37,96,98,101,103,106,108,110,113,115,118,120,122,125,127,130,132,134,137,139,142,144],{"class":39,"line":97},5,[37,99,100],{"class":43},"        \u003C",[37,102,16],{"class":47},[37,104,105],{"class":72}," v-model",[37,107,76],{"class":43},[37,109,79],{"class":43},[37,111,112],{"class":82},"test",[37,114,79],{"class":43},[37,116,117],{"class":72},"cols",[37,119,76],{"class":43},[37,121,79],{"class":43},[37,123,124],{"class":82},"30",[37,126,79],{"class":43},[37,128,129],{"class":72}," rows",[37,131,76],{"class":43},[37,133,79],{"class":43},[37,135,136],{"class":82},"10",[37,138,79],{"class":43},[37,140,141],{"class":43},">\u003C\u002F",[37,143,16],{"class":47},[37,145,51],{"class":43},[37,147,149,152,154],{"class":39,"line":148},6,[37,150,151],{"class":43},"    \u003C\u002F",[37,153,59],{"class":47},[37,155,51],{"class":43},[37,157,159,162,164],{"class":39,"line":158},7,[37,160,161],{"class":43},"\u003C\u002F",[37,163,59],{"class":47},[37,165,51],{"class":43},[37,167,169,171,173],{"class":39,"line":168},8,[37,170,161],{"class":43},[37,172,48],{"class":47},[37,174,51],{"class":43},[37,176,178,180,183],{"class":39,"line":177},9,[37,179,44],{"class":43},[37,181,182],{"class":47},"script",[37,184,51],{"class":43},[37,186,188,192,195],{"class":39,"line":187},10,[37,189,191],{"class":190},"s6cf3","export",[37,193,194],{"class":190}," default",[37,196,197],{"class":43}," {\n",[37,199,201,204],{"class":39,"line":200},11,[37,202,203],{"class":47},"    data",[37,205,206],{"class":43},"(){\n",[37,208,210,213],{"class":39,"line":209},12,[37,211,212],{"class":190},"        return",[37,214,215],{"class":43},"{\n",[37,217,219,222,225],{"class":39,"line":218},13,[37,220,221],{"class":47},"            test",[37,223,224],{"class":43},":",[37,226,227],{"class":43},"''\n",[37,229,231],{"class":39,"line":230},14,[37,232,233],{"class":43},"        }\n",[37,235,237],{"class":39,"line":236},15,[37,238,239],{"class":43},"    }\n",[37,241,243],{"class":39,"line":242},16,[37,244,245],{"class":43},"}\n",[37,247,249,251,253],{"class":39,"line":248},17,[37,250,161],{"class":43},[37,252,182],{"class":47},[37,254,51],{"class":43},[10,256,257,258,261,262,265,266,268],{},"とても簡単で",[14,259,260],{},"v-model","を使用してその",[14,263,264],{},"data()","を表示してあるだけです。そしてCSSでは",[14,267,83],{},"を指定して、改行コードが存在したらそこで改行するようにします。",[59,270,274,275],{"className":271},[272,273],"alert","alert-success","\nCSS の white-space プロパティは、要素内のホワイトスペースをどのように扱うかを設定します。\n",[276,277,278],"small",{},[279,280,283],"a",{"href":281,"target":282},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FCSS\u002Fwhite-space","_blank","mozilla.org",[10,285,286,287,291],{},"ただし上図のように謎のインテンドが最初の改行にあります。なぜ生じしてしまうのかを調べたところ、 ",[288,289,290],"strong",{},"エディター上でのインテンド"," が原因でした。以下のようにファイルを直してみます。",[28,293,295],{"className":30,"code":294,"language":32,"meta":33,"style":33},"\u003Ctemplate>\n\u003Cdiv>\n    \u003Cdiv style=\"white-space:pre;\">\n{{test}}\n        \u003Ctextarea v-model=\"test\"cols=\"30\" rows=\"10\">\u003C\u002Ftextarea>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003C\u002Fscript>\n",[14,296,297,305,313,331,336,378,386,394,402,408],{"__ignoreMap":33},[37,298,299,301,303],{"class":39,"line":40},[37,300,44],{"class":43},[37,302,48],{"class":47},[37,304,51],{"class":43},[37,306,307,309,311],{"class":39,"line":54},[37,308,44],{"class":43},[37,310,59],{"class":47},[37,312,51],{"class":43},[37,314,315,317,319,321,323,325,327,329],{"class":39,"line":64},[37,316,67],{"class":43},[37,318,59],{"class":47},[37,320,73],{"class":72},[37,322,76],{"class":43},[37,324,79],{"class":43},[37,326,83],{"class":82},[37,328,79],{"class":43},[37,330,51],{"class":43},[37,332,333],{"class":39,"line":90},[37,334,335],{"class":93},"{{test}}\n",[37,337,338,340,342,344,346,348,350,352,354,356,358,360,362,364,366,368,370,372,374,376],{"class":39,"line":97},[37,339,100],{"class":43},[37,341,16],{"class":47},[37,343,105],{"class":72},[37,345,76],{"class":43},[37,347,79],{"class":43},[37,349,112],{"class":82},[37,351,79],{"class":43},[37,353,117],{"class":72},[37,355,76],{"class":43},[37,357,79],{"class":43},[37,359,124],{"class":82},[37,361,79],{"class":43},[37,363,129],{"class":72},[37,365,76],{"class":43},[37,367,79],{"class":43},[37,369,136],{"class":82},[37,371,79],{"class":43},[37,373,141],{"class":43},[37,375,16],{"class":47},[37,377,51],{"class":43},[37,379,380,382,384],{"class":39,"line":148},[37,381,151],{"class":43},[37,383,59],{"class":47},[37,385,51],{"class":43},[37,387,388,390,392],{"class":39,"line":158},[37,389,161],{"class":43},[37,391,59],{"class":47},[37,393,51],{"class":43},[37,395,396,398,400],{"class":39,"line":168},[37,397,161],{"class":43},[37,399,48],{"class":47},[37,401,51],{"class":43},[37,403,404],{"class":39,"line":177},[37,405,407],{"emptyLinePlaceholder":406},true,"\n",[37,409,410,412,415,417],{"class":39,"line":187},[37,411,44],{"class":43},[37,413,414],{"class":93},"\u002F",[37,416,182],{"class":47},[37,418,51],{"class":43},[10,420,421,424],{},[14,422,423],{},"{{text}}","の箇所を一番左につけることでなぜか、改行の際のインテンドがなくなりました。",[19,426],{":src":427,":width":22,":center":23},"'_mix\u002Fsch-2021-05-04 22.01.03.png'",[10,429,430],{},"またはこのようにタグを改行させず、一行内に書くことでも解決できます。",[28,432,434],{"className":30,"code":433,"language":32,"meta":33,"style":33},"\u003Ctemplate>\n\u003Cdiv>\n    \u003Cdiv style=\"white-space:pre;\">{{test}}\u003C\u002Fdiv>\n    \u003Ctextarea v-model=\"test\"cols=\"30\" rows=\"10\">\u003C\u002Ftextarea>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\nexport default {\n    data(){\n        return{\n            test:''\n        }\n    }\n}\n\u003C\u002Fscript>\n",[14,435,436,444,452,480,522,530,538,546,554,560,566,574,578,582,586],{"__ignoreMap":33},[37,437,438,440,442],{"class":39,"line":40},[37,439,44],{"class":43},[37,441,48],{"class":47},[37,443,51],{"class":43},[37,445,446,448,450],{"class":39,"line":54},[37,447,44],{"class":43},[37,449,59],{"class":47},[37,451,51],{"class":43},[37,453,454,456,458,460,462,464,466,468,471,474,476,478],{"class":39,"line":64},[37,455,67],{"class":43},[37,457,59],{"class":47},[37,459,73],{"class":72},[37,461,76],{"class":43},[37,463,79],{"class":43},[37,465,83],{"class":82},[37,467,79],{"class":43},[37,469,470],{"class":43},">",[37,472,473],{"class":93},"{{test}}",[37,475,161],{"class":43},[37,477,59],{"class":47},[37,479,51],{"class":43},[37,481,482,484,486,488,490,492,494,496,498,500,502,504,506,508,510,512,514,516,518,520],{"class":39,"line":90},[37,483,67],{"class":43},[37,485,16],{"class":47},[37,487,105],{"class":72},[37,489,76],{"class":43},[37,491,79],{"class":43},[37,493,112],{"class":82},[37,495,79],{"class":43},[37,497,117],{"class":72},[37,499,76],{"class":43},[37,501,79],{"class":43},[37,503,124],{"class":82},[37,505,79],{"class":43},[37,507,129],{"class":72},[37,509,76],{"class":43},[37,511,79],{"class":43},[37,513,136],{"class":82},[37,515,79],{"class":43},[37,517,141],{"class":43},[37,519,16],{"class":47},[37,521,51],{"class":43},[37,523,524,526,528],{"class":39,"line":97},[37,525,161],{"class":43},[37,527,59],{"class":47},[37,529,51],{"class":43},[37,531,532,534,536],{"class":39,"line":148},[37,533,161],{"class":43},[37,535,48],{"class":47},[37,537,51],{"class":43},[37,539,540,542,544],{"class":39,"line":158},[37,541,44],{"class":43},[37,543,182],{"class":47},[37,545,51],{"class":43},[37,547,548,550,552],{"class":39,"line":168},[37,549,191],{"class":190},[37,551,194],{"class":190},[37,553,197],{"class":43},[37,555,556,558],{"class":39,"line":177},[37,557,203],{"class":47},[37,559,206],{"class":43},[37,561,562,564],{"class":39,"line":187},[37,563,212],{"class":190},[37,565,215],{"class":43},[37,567,568,570,572],{"class":39,"line":200},[37,569,221],{"class":47},[37,571,224],{"class":43},[37,573,227],{"class":43},[37,575,576],{"class":39,"line":209},[37,577,233],{"class":43},[37,579,580],{"class":39,"line":218},[37,581,239],{"class":43},[37,583,584],{"class":39,"line":230},[37,585,245],{"class":43},[37,587,588,590,592],{"class":39,"line":236},[37,589,161],{"class":43},[37,591,182],{"class":47},[37,593,51],{"class":43},[10,595,596,597,599],{},"なぜ",[14,598,83],{},"で謎インテンドが生じてしまうのかわかりませんが、改行コードが入る箇所をエディターで整形する際は気をつけたほうがいいかもしれません。",[601,602,603],"style",{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":33,"searchDepth":64,"depth":64,"links":605},[],[607],"ministack","2021-05-24","white-space： pre;で要素内で生じる、文章の隙間、インテンドの原因。","md",null,{},"\u002Farticles\u002Fbag-html-break-tag",{"title":5,"description":609},"articles\u002Fbag-html-break-tag",[617,618,32],"html","css","_mix\u002Fsch-2021-05-04 21.53.14.png","Uglb2nJDSJTaiJVJS_4tGrhobJMBKtzio_BSkBLsen0",1780987144398]