うーん・・・

ホームページのテキストを折り返したい

締切済

質問者：bari_saku
質問日時：2021/12/15 16:55
回答数：5件

文字情報しかないホームページなのですが、ブラウザの幅に合わせてテキストを折り返してくれず、とんでもなく横に長い状態でしか閲覧ができません。
ブラウザの幅に合わせて文字列を折り返して表示したいのですが、どうすればいいでしょうか。

諸事情から「テキスト情報をWordなどにコピー」は最終手段にしたいです。
なおURLは同じく諸事情により出せません。ごめんなさい。
どうぞよろしくお願い致します。

説明が不足していました。申し訳ありません。
自分で作ったホームページではありません。

補足日時：2021/12/15 18:15
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

最新から表示
回答順に表示

No.5

回答者： wanderer1
回答日時：2021/12/16 18:00

Edgeなら、リーディングモードを試してみるという手があるかもです。

https://www.fmworld.net/cs/azbyclub/qanavi/jsp/q …

当方はMacですので、リーダーモードを使うとうまくいく場合がありますね。
仕様上articleタグを重視するらしいので、ページによっては対応しないケースがあります。

- 0
- 件

通報する

No.4

回答者： sukitaro
回答日時：2021/12/16 08:43

web上で閲覧しているページを折り返したいということなら、

chromeなら、
折り返したい文章を「右クリック」から「検証」をクリック。
edgeなら、
同じく「右クリック」から「開発者ツールで調査する」をクリック。

新しく表示された部分に、
＝＝＝
element.style{
}
＝＝＝
という表示があると思うので、（なければスクロールしてみてください）
そこに、
＝＝＝
element.style{
width:300px;
}
＝＝＝
となるように追記すると、表示が変わるかもしれません。
（右クリックの場所によって、
　折り返されないこともあるかもしれません。）

もう少し詳しく言うと、
もしHTMLタグをご存知であれば、
当該文章を含む一番深いblock要素に、
widthを指定をしてあげれば、折り返されるはずです。

- 0
- 件

通報する

この回答へのお礼

助かりました

こちらの方法で解決致しました！
折り返し以外は多くを求めていなかったので、<br>で強制改行して対応しました。
本当にありがとうございました。

通報する

お礼日時：2021/12/17 00:06

No.3

回答者： naokita
回答日時：2021/12/16 04:09

コンテンツの幅が大きいと、コンピューターは、その幅指定を忠実に従いますので、狭いブラウザ幅を超えてしまい、折り返しはしません。

つまり、
その幅指定を○○pxではなく、100%にすれば良いのです。

また、
・英数文字の連続でも途中で折り返ししませんので、#1さんのように対策
・<pre>タグなども同じで、折り返し禁止なので、幅を超えて表示しちゃいます。

それらの強制や指定を取っ払えば良いのです！！！

-----------------
まあ、簡単な折り返しは、
折り返ししたいテキスト部分に、<br>を入れて強制改行しちゃいます。
あまりお行儀の良くない方法ですが・・・
レスポンシブウェブデザインを勉強すれば、対処できるようになります。

- 0
- 件

通報する

No.2

回答者： wanderer1
回答日時：2021/12/15 17:08

ご自身で作られているウェブサイトなのか、他人が作ったウェブサイトなのかで、対処が違うと思うのですが。

基本的にブラウザの横幅で改行するのが普通なので、もしもそうなっていない場合は<head></head>タグの中の記述が足りない、ということになると思います。

- 0
- 件

通報する

No.1

回答者： feaese
回答日時：2021/12/15 16:56

divとtableの場合のサンプル

<div>や<table>の横幅をパーセント指定します。
固定値（500px）などにすると改行されたようには出来ません。

<html>
<head>
<title>sample</title>
</head>
<body>
<div style="width: 100%;word-break:break-all;">
<p></p>
</div>
</body>
</html>

<html>
<head>
<title>sample</title>
</head>
<body>
<table style="width: 100%;word-break:break-all;">
<tr>
<td></td>
</tr>
</table>
</body>
</html>

※英文用にword-breakを追加しています。