我的網站上有這樣一個頁面，它是一個支持票據頁面，但資訊文本溢位了灰色容器。 以下是代碼（"@"是我的框架（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"/span>>
<div class="login-card"/span>>
<div class="login-header">
<h1 class="header-one">支持票# @STicket. Id</h1>支持票# @STicket.
</div>
<div class="login-info">
<div style="word-wrap: break-word; overflow-wrap: break-word;"/span>>
<p>/span>日期。@STicket.DateSent.ToShortDateString() : @STicket.DateSent.ToShortTimeString()</p>
<h4>Issue:</h4>
<label style="word-wrap: break-word; overflow-wrap: break-word;">/span>@STicket. 訊息</label>@STicket.
<h4>Messages:</h4>
<div class="ticket-comments">/span>
@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>Date.
<label style="word-wrap: break-word; overflow-wrap: break-word;">/span>@msg. 訊息</label>。
</div>。
}
</div>
<h4>添加新的回應</h4>
</div>/span>
<form @onsubmit="提交">
<div class="reg-form"/span>>
<label for=" message"> 你的訊息</label>。
< textarea class="input" id="message" @bind="NewMessage。 Message" rows="3"></textarea>
</div>/span>
<div class="login-reset">
<button type="submit" class="reset-tn"> 發送</按鈕>
</div>/span>
</form>
</div>/span>
</div>/span>
</div>/span>
我已經把已經寫好的樣式類放在一個單獨的檔案中。
uj5u.com熱心網友回復：
試試這個：
<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>/span>日期。@STicket.DateSent.ToShortDateString() : @STicket.DateSent.ToShortTimeString()</p>
<h4>Issue:</h4>
<label style="word-wrap: break-word">@STicket。 Message</label>@STicket.
<h4>Messages:</h4>
<div class="ticket-comments">/span>
@foreach (var msg in Messages)
{
<div class="ticket-comment" >
<span>/span>Date: @msg.Date.ToShortDateString() @msg.Date.ToShortTimeString()</span>Date.
<label style="word-wrap: break-word"/span>>@msg. 訊息</label>。
</div>。
}
</div>
<h4>添加新的回應</h4>/span>
</div>/span>
<form @onsubmit="提交">
<div class="reg-form"/span>>
<label for=" message"> 你的訊息</label>。
< textarea class="input" id="message" @bind="NewMessage。 Message" rows="3"></textarea>
</div>/span>
<div class="login-reset">
<button type="submit" class="reset-tn"> 發送</按鈕>
</div>/span>
</form>
uj5u.com熱心網友回復：
添加word-wrap: break-word;在css中斷字，這樣它就不會超過父容器的寬度
< div class="box"/span> style="width: 380px; background: #f9f9f9; padding: 10px;">
<h2>A title</h2>
<p style="word-wrap: break-word;">adfdsafsdfasdfsdfsdfsdfsdfsdfsdfsadfsadfasdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf="hljs-tag"></p>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/333977.html
標籤：
上一篇：如何使用類來動態地將子母欄居中？