html table内の長文の改行方法について

前提・実現したいこと

tableのtd内で長文を改行させる方法御座いませんでしょうか？

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

長文を入力するとテーブル幅で改行されません。隣のテーブルにテキストが被ってしまいます。
参考キャプチャー

ソースコード

<table class="mdl-data-table" >
        <thead>
          <tr>
            <th>商品情報</th>
            <th>配送先</th>
            <th>見積内容</th>
            <th>見積作成日</th>

          </tr>
        </thead>
        <tbody>
              <tr>
                <td>ここに長い文章ここに長い文章ここに長い文章ここに長い文章ここに長い文章※キャプチャーのダイキンの商品名の箇所</td>
                <td>ここに文章を入れる</td>
                <td>ここに文章を入れる</td>
                <td>ここに文章を入れる</td>
              </tr>
        </tbody>
    </table>

CSSにこれらを設定しましたが、変化が御座いません。
  word-wrap : break-word;
  overflow-wrap : break-word;
  table-layout:fixed;

.mdl-data-table {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-collapse: collapse;
  white-space: nowrap;
  font-size: 13px;
  word-wrap : break-word;
  overflow-wrap : break-word;
  table-layout:fixed;
  background-color: rgb(255,255,255); }
  .mdl-data-table thead {
    padding-bottom: 3px; }
    .mdl-data-table thead .mdl-data-table__select {
      margin-top: 0; }
  .mdl-data-table tbody tr {
    position: relative;
    height: 48px;
    word-wrap : break-word;
    overflow-wrap : break-word;

    -webkit-transition-duration: 0.28s;
            transition-duration: 0.28s;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-property: background-color;
            transition-property: background-color; }
    .mdl-data-table tbody tr.is-selected {
      background-color: #e0e0e0; }
    .mdl-data-table tbody tr:hover {
      background-color: #eeeeee; }
  .mdl-data-table td, .mdl-data-table th {
    padding: 0 18px 0 18px;
    text-align: right; }
    .mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type {
      padding-left: 24px; }
    .mdl-data-table td:last-of-type, .mdl-data-table th:last-of-type {
      padding-right: 24px; }
  .mdl-data-table td {
    position: relative;
    vertical-align: top;
    height: 48px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 12px;
    word-wrap : break-word;
    overflow-wrap : break-word;
    box-sizing: border-box; }
    .mdl-data-table td .mdl-data-table__select {
      vertical-align: top;
      position: absolute;
      left: 24px; }
  .mdl-data-table th {
    position: relative;
    vertical-align: bottom;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    letter-spacing: 0;
    height: 48px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.54);
    padding-bottom: 8px;
    word-wrap : break-word;
    overflow-wrap : break-word;
    box-sizing: border-box; }
    .mdl-data-table th .mdl-data-table__select {
      position: absolute;
      bottom: 8px;
      left: 24px; }

.mdl-data-table__select {
  width: 16px; }

.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
  text-align: left; }


.mdl-data-table__width {
  width: 300px; }

補足情報(言語/FW/ツール等のバージョンなど)

ブラウザはクロームで確認しています。