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

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

ただいまの
回答率

91.24%

  • WordPress

    5034questions

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

  • CSS

    4089questions

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

  • HTML5

    2996questions

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

  • Bootstrap

    725questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 60

kxmori

score 1

前提・実現したいこと

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

商品 単位 価格 画像
くつ・衣類など kg 50円 商品画像
商品名 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>で囲まれた文字が改行されず、

 ※文字が横幅に合わせて改行されないため、横に並んだ項目同士が被る

のが直りません。

該当のソースコード

  .jtTableContainer table{
     border-collapse: collapse;
     border: none;
        word-break : break-all;
 }

  .jtTableContainer table tr th, .jtTableContainer table tr td{
     border: none;
       word-break : break-all;
 }

  .jtTableContainer table td{
          word-break : break-all;
          width:30%;
 }

  .jtTableContainer table tr{
     border: none;   
 }

   .jtrespo-scroll table tr td, .jtrespo-scroll table tr th{
     border: none;   
     white-space: nowrap;
 }

 table tr td.htRight, table tr th.htRight{
     text-align: right;
 }

 table tr td.htCenter, table tr th.htCenter{
     text-align: center;
 }

 table tr td.htLeft,table tr th.htLeft{
     text-align: left;
     word-break : break-all;
 }

 table tr td.htJustify,table tr th.htJustify{
     text-align: justify;
 }

 table tr td.border-bottom,table tr th.border-bottom{
     border-bottom:solid 1px #ccc;
 }
 table tr td.border-top,table tr th.border-top{
     border-top:solid 1px #ccc;
 }
 table tr td.border-right,table tr th.border-right{
     border-right:solid 1px #ccc;
 }
 table tr td.border-left,table tr th.border-left{
     border-left:solid 1px #ccc;
 }

 .jtrespo-stack{
     overflow-x:hidden;
       word-break : break-all;
 }

 .jtrespo-stack table{
       word-break : break-all;
     table-layout: fixed;
     width:30%;
 }

 .jtrespo-stack table.stackMeNowJT thead{
     display: none;
           word-break : break-all;
      width:1
 }

 .jtrespo-stack .stackedheadtitlejt{
     display:none;
           word-break : break-all;
      width:1
 }

  .jtrespo-stack table.stackMeNowJT .stackedheadtitlejt{
      display: inline-block;
      word-break : break-all;
      width:100%;
  }

.jtrespo-stack table.stackMeNowJT tr,
.jtrespo-stack table.stackMeNowJT th,
.jtrespo-stack table.stackMeNowJT td {
    display: block;
    word-break : break-all;
    width:30%;}

.jtrespo-stack table.stackMeNowJT tr{
    margin-bottom: 24px;
    padding: 8px;
    background: #fbfafa;
    border: solid 1px #ccc;
    box-shadow: 0px 0px 4px #ccc;
    word-break : break-all;
}
.jtrespo-stack table.stackMeNowJT td {
    border-top: none;
    margin-bottom: 4px;
    word-break : break-all;
        width:30%;
}
.jtrespo-stack table.stackMeNowJT tr td:first-child {
    font-weight: bold;
    width:30%;
}

.dataTables_length{
    float: none!important;
    margin-bottom: 8px;
    display: block;
}

.dataTables_paginate{
    float: none!important;
    text-align: left!important;
    margin: 14px 0;
}
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<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>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<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 />
                    <a href="">買取に関する詳細</a>
</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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/12 14:56

    x_x 様

    ありがとうございます!!!
    教えていただいたやり方で解決しました!

    この度は本当にありがとうございました。

    キャンセル

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

ただいまの回答率

91.24%

関連した質問

同じタグがついた質問を見る

  • WordPress

    5034questions

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

  • CSS

    4089questions

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

  • HTML5

    2996questions

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

  • Bootstrap

    725questions

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