我的网站上有这个页面，它是一个支持票证页面，但消息文本溢出了灰色容器。 下面是代码('@'用于我的框架（blazor）中的变量） 我已经尝试使用“word-wrap”css类

<style>
    .card-wrapper {
        min-width: 320px;
    }
    .login-card {
        position: relative;
        background-color: #eaeaea;
        padding: 2rem 1.5rem;
        max-width: 700px;
        margin: auto;
        border-radius: 3rem;
        box-shadow: rgba(0, 0, 0, 0.09) 2px 6px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .login-header {
        margin: 1rem;
        width: 100%;
        text-align: center;
        text-transform: capitalize;
    }
    .login-info {
        width: 100%;
    }
</style>

<div class="card-wrapper">
        <div class="login-card">
            <div class="login-header">
                <h1 class="header-one">Support ticket # @STicket.Id</h1>
            </div>
            <div class="login-info">
                <div style="word-wrap: break-word; overflow-wrap: break-word;">
                    <p>Date: @STicket.DateSent.ToShortDateString() : @STicket.DateSent.ToShortTimeString()</p>
                    <h4>Issue:</h4>
                    <label style="word-wrap: break-word; overflow-wrap: break-word;">@STicket.Message</label>
            
                    <h4>Messages:</h4>
                    <div class="ticket-comments">
                        @foreach (var msg in Messages)
                        {
                            <div class="ticket-comment" style="word-wrap: break-word; overflow-wrap: break-word;">
                                <span>Date: @msg.Date.ToShortDateString() @msg.Date.ToShortTimeString()</span>
                                <label style="word-wrap: break-word; overflow-wrap: break-word;">@msg.Message</label>
                            </div>
                        }
                    </div>
                <h4>Add new response</h4>
                </div>
                
                <form @onsubmit="Submit">
                    <div class="reg-form">
                        <label for="message">Your message</label>
                        <textarea class="input" id="message" @bind="NewMessage.Message" rows="3"></textarea>
                    </div>
                    <div class="login-reset">
                        <button type="submit" class="reset-btn">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

我已经包括了在单独文件中编写的样式类。

顺晟科技：

添加以中断css中的单词，这样它就不会超过父容器的宽度

尝试此：

<style>
    .card-wrapper {
        min-width: 320px;
    }
    .login-card {
        position: relative;
        background-color: #eaeaea;
        padding: 2rem 1.5rem;
        max-width: 700px;
        margin: auto;
        border-radius: 3rem;
        box-shadow: rgba(0, 0, 0, 0.09) 2px 6px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .login-header {
        margin: 1rem;
        width: 100%;
        text-align: center;
        text-transform: capitalize;
    }
    .login-info {
        width: 100%;
    }
</style>

<div class="card-wrapper">
        <div class="login-card">
            <div class="login-header">
                <h1 class="header-one">Support ticket # @STicket.Id</h1>
            </div>
            <div class="login-info">
                <div style="word-wrap: break-word; overflow-wrap: break-word;">
                    <p>Date: @STicket.DateSent.ToShortDateString() : @STicket.DateSent.ToShortTimeString()</p>
                    <h4>Issue:</h4>
                    <label style="word-wrap: break-word; overflow-wrap: break-word;">@STicket.Message</label>
            
                    <h4>Messages:</h4>
                    <div class="ticket-comments">
                        @foreach (var msg in Messages)
                        {
                            <div class="ticket-comment" style="word-wrap: break-word; overflow-wrap: break-word;">
                                <span>Date: @msg.Date.ToShortDateString() @msg.Date.ToShortTimeString()</span>
                                <label style="word-wrap: break-word; overflow-wrap: break-word;">@msg.Message</label>
                            </div>
                        }
                    </div>
                <h4>Add new response</h4>
                </div>
                
                <form @onsubmit="Submit">
                    <div class="reg-form">
                        <label for="message">Your message</label>
                        <textarea class="input" id="message" @bind="NewMessage.Message" rows="3"></textarea>
                    </div>
                    <div class="login-reset">
                        <button type="submit" class="reset-btn">Send</button>
                    </div>
                </form>
            </div>
        </div>
    </div>