Chromeにおける連続した感嘆符の折り返し方法について

ネイティブなHTML環境で、テーブル要素内に任意の文字列を表示するコードを書いています。

幅が定められているため、長文が入力されている場合には折り返しをする必要があり、CSSに下記設定を指定してあります。
URLなど、一般的な英数字記号が混ざった文字列については自動折り返しが出来ることを確認しております。

ただし、感嘆符(!)が連続した長文については折り返されずに突き抜けてしまいます。

これはChromeで検証した際に起きた問題です。IE、Firefoxで試したところ、想定通りに改行されました。

このレイアウト崩れを回避する方法について、ご存知の方がおられましたらご助言の程、宜しくお願いします。

html
1<!DOCTYPE html>
2<html>
3<head>
4    <title>tabletest</title>
5    <meta charset="utf-8">
6    <style type="text/css">
7        table {
8            width: 500px;
9            border: 1px solid #000;
10            table-layout: fixed;
11        }
12        td {
13            word-break: break-all;
14            word-wrap: break-word;
15            border: 1px solid #000;
16        }
17        th {
18            border: 1px solid #000;
19        }
20
21        .status {
22            display: table;
23            border: 1px solid #000;
24            width: 500px;
25        }
26        .status_col {
27            display: table-cell;
28            word-break: break-all;
29            word-wrap: break-word;
30            margin: 5px;
31            border: 1px solid #000;
32            max-width: 300px;
33        }
34    </style>
35</head>
36<body>
37<table>
38    <tbody>
39        <tr><td>table要素</td><td>!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</td></tr>
40    </tbody>
41</table>
42
43<div class="status">
44    <div class="status_col">divで疑似テーブル</div>
45    <div class="status_col">!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>
46</div>
47</body>
48</html>

IE11

Firefox55

Chrome60

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

回答2件

原因は分からないのですが「word-break」をコメントアウトすると正しく表示されました。
試したのはバージョン61です。

投稿2017/09/28 07:43

退会済みユーザー

総合スコア0

fort-space

2017/09/28 08:09

回答ありがとうございます！ word-breakを外してブラウザデフォルトの設定が、単語で折り返すようになったからだと思いますが、これだと今度は長文URLを入力した際に折り返されなくなってしまいました。ご対応ありがとうございます。

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

ベストアンサー

これでどうでしょう。

CSS
1word-break: keep-all; /* Windows IE11 Firefox Chrome*/

追記：

すみません、これではたぶん文字が改行されないです。

【word-break - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/word-break

追記：

とりあえずこれでも折り返すようです。

動くサンプル：https://jsfiddle.net/fdzybvLd/

投稿2017/09/28 07:43

編集2017/09/28 07:58

kei344

総合スコア69398

fort-space

2017/09/28 08:13

ご回答ありがとうございます！ keep-allに変えて試してみました。感嘆符の方は解消されましたが、今度は長いURLが折り返されなくなってしまいました。 JSFiddleでは同じCSS/HTMLで改行されようになったということは、何かしらロケール設定みたいなのを記述しないといけないとかありそうですね。もう少し悩んでみることにします。

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

あなたの回答