NikFaraday
@NikFaraday
Student full-stack Developer

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

Есть таблица, внутри таблицы есть очень длинное сообщение, которое вылазит за границы таблицы, перепробовал наверное всё, что только можно. Длинное поле это 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>
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
NikFaraday
@NikFaraday Автор вопроса
Student full-stack Developer
Решение:

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


Работает только в том случае, если в тексте есть пробелы, если пробелов нет, тогда текст так и будет вылазить за пределы монитора)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@wadowad
Решения сходу:
-добавить автопереносы
-уменьшить внутренние отступы в ячейках таблицы
-уменьшить размер шрифта в таблице
Ответ написан
sslion
@sslion
ты бы хоть снимок экрана приложил...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы