Пробел не работает

0

Я создал div с css ниже:

.inner-overlay {
    width: 500px;
    min-height: 200px;
    height: 150px;
    background: white;
    position: absolute;
    margin: auto;
    z-index: 1301;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: 3px solid rgba(56, 93, 138, 1.0);
    display: none;
}

И div включал форму с css:

.reportTable {
    width: 460px;
    margin: auto;
}
.reportTable tr td:nth-child(1) {
   width: 20px;
}
.reportTable tr td:nth-child(2) {
   width: 400px;
   white-space: normal;
}

Для div и form:

<div class="inner-overlay" style="display: block;">
    <form class="reportForm">
    <table class="reportTable">
    <tbody>
        <tr>
        <td colspan="2">Please Choose A Reason From Below:</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="1"></td>
        <td>There is/are course work content or answer.</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="2"></td>
        <td>The content is not related to academic.</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="3"></td>
        <td>There is/are suspicious file uploaded.</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="4"></td>
        <td>asdasdasdasd</td>
        </tr>
        <tr>
        <td><input type="radio" name="reportID" value="5"></td>
                    <td>asdasfasfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
        </tr>
        <tr>
        <td>&nbsp;</td>
        <td><span id="submitReport" onclick="javascript: submitReport(&quot;notes&quot;, &quot;29&quot;)">Submit</span> <span id="cancelReport" onclick="javascript: $(&quot;.overlay&quot;).hide(); $(&quot;.inner-overlay&quot;).hide();">Cancel</span></td>
        </tr>
    </tbody></table>
    </form>
</div>

Изображение ниже - это дизайн моей таблицы. Но white-space не работает так, как должно быть.

Изображение 174551

Я что-то пропустил?

РЕДАКТИРОВАТЬ:

  1. Добавлен код HTML.

  2. Загружен в jsfiddle.

  • 2
    Разместите свой HTML. И jsFiddle поможет.
  • 0
    Могу ли я посмотреть на ваш HTML-файл, который использует этот CSS?
Показать ещё 2 комментария
Теги:

1 ответ

1
Лучший ответ

Если вы добавите word-break:break-all; Правило для вашей камеры должно работать:

.reportTable tr td:nth-child(2) {
    width: 400px;
    white-space: normal;
    word-break:break-all;
}

Пример jsFiddle

  • 0
    Могу ли я знать, почему white-space недостаточно для выполнения работы?
  • 0
    Думайте о правиле пробела как о противоположности правилу разбиения по словам. developer.mozilla.org/en-US/docs/Web/CSS/white-space

Ещё вопросы

Сообщество Overcoder
Наверх
Меню