I encountered a problem on my support ticket page where the message text was overflowing out of the designated grey container. Despite trying to utilize the "word-wrap" CSS class, the issue persisted. Here's the code snippet with placeholders for variables in my Blazor framework:
<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>
https://i.sstatic.net/1u7k8.png
The separate file containing the defined style classes has also been included.