HTMLにてCSSのwhite-space: pre-wrap;が効かない

Question

HTMLに関して全くの初心者で質問内容が上手く伝えられていないかと思いますが、お許し下さい。

上記の図はChromeから表示したWEBページ画面とソースになります。
ソース内のJson表記のtaginfoをソースの表示内容通りにスペース・改行したのもでwebページに表示を行いたいのですが、上手くいきません。

CSS内にwhite-space: pre-wrap;を追加するなどを試してみましたが、ダメでした。
.col-1{
box-sizing: border-box;
padding: 0 5px;
display: inline-block;
font-size: 1em;
width: 100%;
height: auto;
text-align: left;
color: #aaaaaa;
border: none;
border-bottom: 2px solid #e9e9e9;
margin-top: 0;
white-space: pre-wrap;
}

ソース上では改行されているので元データには問題ないかと思っております。
改行表示されない原因または別方法で表示する方法などご教授して頂ければ幸いです。

※追記
taginfoは以下の処理で取得しています。

Answer 1

ajax微妙なのでfetchしてみては？

setInterval(()=>{
fetch(url).then(res=>res.text()).then(txt=>document.querySelector('#taginfo').textContent=txt);
},1000);

Comments

[1079]

ご回答ありがとうございます。
同様の処理がこんなに短いコードで書けると知りませんでした。
教えて頂いた内容で動作しましたが、改行表示については未解決状態です。

[yambejp]

私の環境では特に問題なさそうなので、cssの指定がきちんとできてないか
競合して上書きされているとかその手のトラブルかもしれません
サーバーサイドのデータ吐き出しをプログラムではなくスタティックなテキストファイルにして
テストするのも有効かと

[1079]

動作確認までして頂きありがとうございます。
HTMLに関してまだ分からない事だらけなので教えて頂いたコードを調べつつ試してみます。

Answer 2

HTMLのクラスはcol_1ですが、CSSでは.col-1となっていて、スタイルが適用されていないものと思われます。

Comments

[1079]

早速のご回答をありがとうございます。
col_１に修正しましたが、変化はありませんでした。
試しにソース上に直接入力したところ、webページ上では改行され
white-space: pre-wrap;が効いていることを確認しました。
taginfoはXMLHttpRequest()を使用して取得してきているのですが、
そちらに原因があるのでしょうか？

[maisumakun]

innerHTMLで処理している関係上、改行に改変が加わることも考えられます（通常、HTMLで改行は意味を持ちませんので）。