时间戳

首页 > 解决方案 > 如何在css中断词

html - 如何在css中断词

问题描述

我的网站上有这个页面，它是一个支持票页面，但是消息文本溢出了灰色容器。这是代码（'@'用于我的框架（blazor）中的变量）我尝试使用“自动换行”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>

这是在我的网站上

我已经包含了已经写在一个单独文件中的样式类。

标签： htmlcssblazor

解决方案

试试这个：

<div style="white-space: -moz-pre-wrap !important; white-space: -pre-wrap;  white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; white-space: -webkit-pre-wrap; word-break: break-all; white-space: normal;">
                        <p>Date: @STicket.DateSent.ToShortDateString() : @STicket.DateSent.ToShortTimeString()</p>
                        <h4>Issue:</h4>
                        <label style="word-wrap: break-word">@STicket.Message</label>
                
                        <h4>Messages:</h4>
                        <div class="ticket-comments">
                            @foreach (var msg in Messages)
                            {
                                <div class="ticket-comment" >
                                    <span>Date: @msg.Date.ToShortDateString() @msg.Date.ToShortTimeString()</span>
                                    <label style="word-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>

推荐阅读