Почему текст вылазит за границы таблицы?

Question

[Nik Faraday]

Есть таблица, внутри таблицы есть очень длинное сообщение, которое вылазит за границы таблицы, перепробовал наверное всё, что только можно. Длинное поле это Question в таблице

<div class="row">
                    <div class="col-lg-12">
                        <table class="table table-striped table-hover">
                            <tr>
                                <td>
                                    <span class="pcoded-mtext">Status: </span>
                                </td>
                                <td>
                                    <span class="pcoded-mtext">@Model.Client.Status</span>
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    <span class="pcoded-mtext">Phone: </span>
                                </td>
                                <td>
                                    <span class="pcoded-mtext">@Model.Client.PhoneNumber</span>
                                </td>
                            </tr>

                            @if(Model.Client.Telegram != "")
                            {
                                <tr>
                                    <td>
                                        <span class="pcoded-mtext">Telegram: </span>
                                    </td>
                                    <td>
                                        <span class="pcoded-mtext">@Model.Client.Telegram</span>
                                    </td>
                                </tr>
                            }

                            @if(Model.Client.Viber != "")
                            {
                                <tr>
                                    <td>
                                        <span class="pcoded-mtext">Viber: </span>
                                    </td>
                                    <td>
                                        <span class="pcoded-mtext">@Model.Client.Viber</span>
                                    </td>
                                </tr>
                            }

                            @if(Model.Client.Email != "")
                            {
                                <tr>
                                    <td>
                                        <span class="pcoded-mtext">Email: </span>
                                    </td>
                                    <td>
                                        <span class="pcoded-mtext">@Model.Client.Email</span>
                                    </td>
                                </tr>
                            }

                            <tr>
                                <td>
                                    <span class="pcoded-mtext">Question: </span>
                                </td>
                                <td>
                                    <span class="pcoded-mtext" style="word-wrap: break-word">@Model.Client.Question</span>
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    <span class="pcoded-mtext">Calls: </span>
                                </td>
                                @if(Model.Client.Status == ClientStatus.New)
                                {
                                    <td><span class="pcoded-mtext">To assign a call, the appeal must be  <a id="progressStatus" class="btn-link" href="#">taken into work</a></span></td>
                                }
                                else
                                {
                                    <td>Calls here</td>
                                }
                            </tr>

                            <tr>
                                <td>
                                    <span class="pcoded-mtext">Meetings: </span>
                                </td>
                                @if(Model.Client.Status == ClientStatus.New)
                                {
                                    <td><span class="pcoded-mtext">To make an appointment, the appeal must be <a id="progressStatus" class="btn-link" href="#">taken into work</a></span></td>
                                }
                                else
                                {
                                    <td>Meetings here</td>
                                }
                            </tr>

                            <tr>
                                <td>
                                    <span class="pcoded-mtext">Processes: </span>
                                </td>                    
                                @if(Model.Client.Status == ClientStatus.New)
                                {
                                    <td><span class="pcoded-mtext">To assign a process, the appeal must be <a id="progressStatus" class="btn-link" href="#">taken into work</a></span></td>
                                }
                                else
                                {
                                    <td>Processes here</td>
                                }
                            </tr>

                            <tr>
                                <td>
                                    <span class="pcoded-mtext">Contracts: </span>
                                </td>
                                @if(Model.Client.Status == ClientStatus.New)
                                {
                                    <td><span class="pcoded-mtext">To add a contract, the appeal must be <a id="progressStatus" class="btn-link" href="#">taken into work</a></span></td>
                                }
                                else
                                {
                                    <td>
                                        @foreach(ContractEntity contract in Model.Client.Contracts)
                                        {
                                            <a href="@Url.Action("Details", "Contract", new { @id = @contract.Id })">Number: @contract.Number <br /> @contract.ContractDate.ToString("r")</a> <br />
                                            <span class="text-muted">@contract.Status (@contract.Price)</span> <br /> <br />
                                        }
                                        <a href="@Url.Action("Create", "Contract", new { @clientId = @Model.Client.Id })" class="btn btn-xs btn-primary">Add contract</a>
                                    </td>
                                }
                            </tr>
                        </table>
                    </div>
                </div>

Comments

[Semantic.Moscow]

Ctrl+Shift+J
смотреть Styles и Computed - что там унаследовала ваша таблица и откуда?

Answer 1

[Nik Faraday]

Решение:

<style type="text/css">
    th, td {
        white-space: unset;
    }
</style>

Работает только в том случае, если в тексте есть пробелы, если пробелов нет, тогда текст так и будет вылазить за пределы монитора)

Answer 2

[wadowad]

Решения сходу:
-добавить автопереносы
-уменьшить внутренние отступы в ячейках таблицы
-уменьшить размер шрифта в таблице

Comments

[Nik Faraday]

- Автопереносы не работают, так как текст вылазит вообще за границы экрана
- Как вы видите, отступов внутри таблицы нет вообще
- Размер шрифта аналогичен размеру шрифта h6

[wadowad]

В том-то и дело, что не вижу. Поэтому и гадаю.

[Nik Faraday]

wadowad, я выше кинул кусок кода, которой находится в блоке col-lg-8 и там более никаких классов, которые могут влиять на таблицу нету

[Одиночка Айс]

Nik Faraday, толку нам от этой таблицы без реальных данных, которые вылезают за пределы таблицы?

Answer 3

[Сергей]

ты бы хоть снимок экрана приложил...