質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

13462閲覧

CSS「word-break : break-all;」が効いていない…?

kxmori

総合スコア9

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/01/12 05:00

###前提・実現したいこと
※テーブルタグの<td>の中の文字が横幅に合わせて改行されないため、横に並んだ<td>の文字が被ってしまう。
→CSS「word-break : break-all;」が効いていない…?

商品単位価格画像
くつ・衣類などkg50円商品画像
商品名300円商品画像

↑この表だと「くつ・衣類など」とその横の「kg」がスマホでみたときや、PCでブラウザの横幅を縮めたときに被ってします。

bootstrap3、wordpressを使って作ったサイトに、
JTRT RESPONSIVE TABLES というプラグインをインストールして作成した表があり、デバイスに合わせてその表中の項目の大きさが均一に縮小・拡大されるようにJTRT RESPONSIVE TABLESのCSSファイルに「table-layout: fixed;」を追加しました。

そのままだと画面幅が縮まったときに
※文字が横幅に合わせて改行されないため、横に並んだ項目同士が被るので、さらに同じCSSファイルに「word-break : break-all;」、「word-wrap:break-word;」を追記しました。

###発生している問題・エラーメッセージ

しかし画面幅を狭めても<td>で囲まれた文字が改行されず、  ※文字が横幅に合わせて改行されないため、横に並んだ項目同士が被る のが直りません。

###該当のソースコード

CSS

1 .jtTableContainer table{ 2 border-collapse: collapse; 3 border: none; 4 word-break : break-all; 5 } 6 7 .jtTableContainer table tr th, .jtTableContainer table tr td{ 8 border: none; 9 word-break : break-all; 10 } 11 12 .jtTableContainer table td{ 13 word-break : break-all; 14 width:30%; 15 } 16 17 .jtTableContainer table tr{ 18 border: none; 19 } 20 21 .jtrespo-scroll table tr td, .jtrespo-scroll table tr th{ 22 border: none; 23 white-space: nowrap; 24 } 25 26 table tr td.htRight, table tr th.htRight{ 27 text-align: right; 28 } 29 30 table tr td.htCenter, table tr th.htCenter{ 31 text-align: center; 32 } 33 34 table tr td.htLeft,table tr th.htLeft{ 35 text-align: left; 36 word-break : break-all; 37 } 38 39 table tr td.htJustify,table tr th.htJustify{ 40 text-align: justify; 41 } 42 43 table tr td.border-bottom,table tr th.border-bottom{ 44 border-bottom:solid 1px #ccc; 45 } 46 table tr td.border-top,table tr th.border-top{ 47 border-top:solid 1px #ccc; 48 } 49 table tr td.border-right,table tr th.border-right{ 50 border-right:solid 1px #ccc; 51 } 52 table tr td.border-left,table tr th.border-left{ 53 border-left:solid 1px #ccc; 54 } 55 56 .jtrespo-stack{ 57 overflow-x:hidden; 58 word-break : break-all; 59 } 60 61 .jtrespo-stack table{ 62 word-break : break-all; 63 table-layout: fixed; 64 width:30%; 65 } 66 67 .jtrespo-stack table.stackMeNowJT thead{ 68 display: none; 69 word-break : break-all; 70 width:1 71 } 72 73 .jtrespo-stack .stackedheadtitlejt{ 74 display:none; 75 word-break : break-all; 76 width:1 77 } 78 79 .jtrespo-stack table.stackMeNowJT .stackedheadtitlejt{ 80 display: inline-block; 81 word-break : break-all; 82 width:100%; 83 } 84 85.jtrespo-stack table.stackMeNowJT tr, 86.jtrespo-stack table.stackMeNowJT th, 87.jtrespo-stack table.stackMeNowJT td { 88 display: block; 89 word-break : break-all; 90 width:30%;} 91 92.jtrespo-stack table.stackMeNowJT tr{ 93 margin-bottom: 24px; 94 padding: 8px; 95 background: #fbfafa; 96 border: solid 1px #ccc; 97 box-shadow: 0px 0px 4px #ccc; 98 word-break : break-all; 99} 100.jtrespo-stack table.stackMeNowJT td { 101 border-top: none; 102 margin-bottom: 4px; 103 word-break : break-all; 104 width:30%; 105} 106.jtrespo-stack table.stackMeNowJT tr td:first-child { 107 font-weight: bold; 108 width:30%; 109} 110 111.dataTables_length{ 112 float: none!important; 113 margin-bottom: 8px; 114 display: block; 115} 116 117.dataTables_paginate{ 118 float: none!important; 119 text-align: left!important; 120 margin: 14px 0; 121}

HTML

1<div id="accordion" class="panel-group"> 2<div class="panel panel-default"> 3<div class="panel-heading"> 4<h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">価格表<i class="fa fa-sort-desc"></i><img src="" alt="価格表" width="350" height="44" class="right size-full wp-image-1228" /></a></h4> 5</div> 6<div id="collapseOne" class="panel-collapse collapse in"> 7<div class="panel-body"><div class='jtrt_table_MotherShipContainer'><div class='jtTableContainer jtrespo-scroll ' ><div class='jtsettingcontainer' style='display:none;position:absolute;left:-9999px;'><table id='jtrt_table_2260' data-sorting='false' data-paging='false' data-paging-size='10' data-filtering='false' data-jtrt-table-id='2260' class='jtrt-table' ><thead><tr><th>衣類・バック・装飾品</th><th>単位</th><th>買取単価</th><th>画像</th></tr></thead><tbody><tr><td>スニーカー(セット)</td><td>kg</td><td><span class="satei">80円</span></td><td><img src="http://(ここはサイトURLが入っています)/wp/wp-content/uploads/2015/05/shoes02.png" class="res center" alt="買取価格スニーカーセット" width="100px"></td></tr><tr><td>靴(セット)※ブーツ不可</td><td>kg</td><td><span class="satei">50円</span></td><td><img src="http://(ここはサイトURLが入っています)/wp/wp-content/uploads/2015/05/shoes08.png" class="res center" alt="買取価格靴セット" width="100px"></td></tr><tr><td>帽子</td><td>kg</td><td><span class="satei">100円</span></td><td><img src="http://(ここはサイトURLが入っています)/wp/wp-content/uploads/2015/05/itemph05.png" class="res center" alt="帽子の買取価格" width="100px"></td></tr><tr><td>バック</td><td>kg</td><td><span class="satei">100円</span></td><td><img src="http://(ここはサイトURLが入っています)/wp/wp-content/uploads/2015/05/itemph02.png" class="res center" alt="バックの買取価格" width="100px"></td></tr><tr><td>アクセサリー・貴金属・<br />腕時計・眼鏡</td><td>kg</td><td><span class="satei">500円</span></td><td><img src="http://(ここはサイトURLが入っています)/wp/wp-content/uploads/2015/05/itemph07.png" class="res center" alt="アクセサリ・貴金属・腕時計・眼鏡の買取価格" width="100px"></td></tr><tr><td>香水(残量50%以上) 上</td><td>kg</td><td><span class="satei">1500円</span></td><td><img src="http://(ここはサイトURLが入っています)/wp/wp-content/uploads/2015/05/itemph09.png" class="res center" alt="香水の買取価格" width="100px"></td></tr><tr><td>香水(残量50%以上) 下</td><td>kg</td><td><span class="satei">750円</span></td><td><img src="http://(ここはサイトURLが入っています)/wp/wp-content/uploads/2015/05/itemph09.png" class="res center" alt="香水の買取価格" width="100px"></td></tr></tbody></table></div></div><br /> 8 <a href="">買取に関する詳細</a> 9</div></p></div></p></div>

###試したこと
※1.bodyやcontainerに「word-break : break-all;」、「word-wrap:break-word;」を付けてみても変わりませんでした。
※2. display: inline-block;が効いていると、横幅を指定しないと効かないという記事を見つけたので、width:100%;を
tableとtdに追加しましたが駄目でした。
※3「word-break : break-all;」、「word-wrap:break-word;」に!inportantを付け加えましたが、それもダメでした。
※4bootstrap.cssにも※1~3を試しましたが、ダメでした。。

###補足情報(言語/FW/ツール等のバージョンなど)
・WordPress 4.8.4
・プラグインJTRT Responsive Tables(https://wordpress.org/plugins/jtrt-responsive-tables/)
・Bootstrap 3.2.0

わかりにくい説明で申し訳ありませんが、解決方法をご存知の方がいらっしゃいましたら教えていただけるとありがたいです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

そもそもwhite-space: nowrap;があって折り返さないようになっています。

CSS

1.jtrespo-scroll table tr td, .jtrespo-scroll table tr th { 2 border: none; 3 /*white-space: nowrap;*/ 4}

投稿2018/01/12 05:30

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kxmori

2018/01/12 05:56

x_x 様 ありがとうございます!!! 教えていただいたやり方で解決しました! この度は本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問