dd要素に<pre>タグを付けながら自動折り返しをかけたい

#解決したい問題と概要

現在上の画像のように、jQueryのToggleで作ったボックスのサイズを超えて文字列が入ってしまい、文字がボックスの右端に到達した時点で折り返しをしたいです。
CSSにoverflow-wrap: break-wordを当てる場合、同時に<pre>も当てようとするとうまく両立できず、皆様のお知恵を借りさせて頂きたいです。

#コード

HTML
1<dt>
2<div class = 'title'><?php echo $data['title']; ?></div>
3<?php echo "(掲載日".$data['start_date']."）";?>
4</dt>
5<dd>
6<pre><div class="break-word"><?php echo $data['text'];?></div></pre>
7</dd>

CSS
1.break-word{
2  width: 600px;
3  overflow-wrap: break-word;
4}
5

#試したこと
上のコードから<pre>を外した場合、break-wordが機能して折り返しをかけてくれます。
ただし、

今度はこのように、本文の文字列に元々入っている改行を認識できなくなってしまいます。

出力している本文の文字列$data['text']はMySQLから引っ張ってきたデータで、<pre>を付けることで改行を認識させているため、このようになってしまいます。

①<pre>を使いながらも自動折り返し出来る方法か、
②<pre>タグではない改行を認識させる方法か、
このどちらかが分かれば適切にボックスの中で表示されると思うのですが、うまく調べられず、ご教示頂ければ幸いです。

どうぞよろしくお願い致します。

yambejp

2020/09/25 08:49

PHP関係ないので、HTMLをきちんとテキストで提示ください

soi

2020/09/25 08:51

修正しました！

yambejp

2020/09/25 08:53

うまく伝わらなくて申し訳ないです。添付画像にあるテキストデータをHTMLとして貼ってくださいということです。質問者さんが省略している$dataは他の人には意味が不明です

soi

2020/09/25 09:05

すみません、本文でさらっと書いて流していたのですが、$dataはMySQLから $select_sql = $dbh->query($sql)->fetchAll(PDO::FETCH_ASSOC|PDO::FETCH_UNIQUE);で拾ったものを<?php foreach ($select_sql as $data) { ?>で回していたものでした。仰る通りこちらの仕様の違いから改行出来なかったようです、ご指摘頂きありがとうございました！

行動規範の内容に同意します

回答1件

ベストアンサー

求めているものと違っていたらすみません。

<pre>のタグを外して、改行として存在しているものを<br>タグに置き換えてしまうのは駄目でしょうか？変更する箇所もphpの中を少し変えるだけなので、簡単だと思います。試してみたわけではないので下記のソースはイメージです。 ```html <dt> <div class = 'title'><?php echo $data['title']; ?></div> <?php echo "(掲載日".$data['start_date']."）";?> </dt> <dd> <div class="break-word"><?php echo str_replace(["\r\n", "\r", "\n"], '<br>', $data['text']);?></div> </dd> ```

投稿2020/09/25 08:52