iT邦幫忙

1

如何讓TextArea原文段落重現

  • 分享至 

  • xImage

各位先進好,請教TextArea問題:
我建了一個TextArea欄位撰寫Abstract存入DB

<div class="form-group">
    <span class="col-md-1" style="color:red;float:left;padding-top:10px;">*</span>
    @Html.LabelFor(model => model.Abstract, htmlAttributes: new { @class = "control-label col-md-1" })
    <div class="col-md-10">
        @Html.TextAreaFor(model => model.Abstract, 10, 80, new { @class = "form-control z-depth-1" })
        @Html.ValidationMessageFor(model => model.Abstract, "", new { @class = "text-danger" })
    </div>
</div>

然後從DB撈出資料Show在Table欄位裡

<tr>
    <th>@Html.DisplayNameFor(model => model.Abstract)</th>
    <td>@Model.Abstract</td>
</tr>

但Show出來的文字並沒有分段,全部都是接續在一起的,如下所示。

20200309摘要 飛機上故意朝空姐咳嗽,中國籍女子當場遭鎖喉壓制。日前,一名中國籍女子,搭乘泰國航空,泰國往中國浦東的航班,但由於著陸時,她不滿消毒時間過長,竟然對著空姐咳嗽,要求對方打開艙門,這一幕當場讓其他乘客看傻眼,空姐隨即找來空少支援,將女子壓制後,要求她坐下。 新型冠狀病毒(CONVID-19,俗稱武漢肺炎)疫情蔓延全球,疫情和防疫狀況成各國焦點。往年世界衛生大會(WHA)都在5月舉辦,對於台灣爭取參加與否以及會在會議中報告哪些防疫內容,中央流行疫情指揮中心今(9)日下午記者會時,指揮官陳時中表示,「WHA就快要自身難保了」,不過若有召開一定會爭取參加。 第73屆世界衛生大會(WHA)預計將於5月17至21日在瑞士日內瓦登場,不過武漢肺炎肆虐,歐洲疫情險峻,是否能如期舉辦仍是未知數。 對此,陳時中坦言,事實上「WHA就快要自身難保了」,疫情會如何發展也很難預測,只能靜心觀察後續消息,不過若有召開一定會去,持續向世界發聲。 (民視新聞網/綜合報導)

從DB裡複製資料出來貼上筆記本查看,文字是有斷行的,請問要如何讓它在顯示時能夠按照原文段落顯示呢?
謝謝~

============================================================================
各位先進您好,我用Replace("\n",""),測試結果它就直接把斷行取代成,所以這個取代的方式目前好像無法解決斷行的問題。
我單純用可以顯示斷行,但是整個table的版面會被拉走,所以加了style="width:900px;"固定寬度版面才不會被拉走。

<tr>
    <th>@Html.DisplayNameFor(model => model.Abstract)</th>
    <td>
        <pre style="width:900px;">
            @Model.Abstract
        </pre>
    </td>
</tr>

所以想請問如果使用來顯示斷行,那要如何讓它版面寬度可以自適應的配合table的寬度呢?
目前是指定它的寬度大小,不讓它超出版面~

看更多先前的討論...收起先前的討論...
fillano iT邦超人 1 級 ‧ 2020-03-12 18:07:38 檢舉
輸出前,把`\n`取代成`<br>`。
<pre>
leo226 iT邦新手 4 級 ‧ 2020-03-13 11:34:10 檢舉
測試結果在原文下方補充發言~感謝大師指導~
方法一,丟資料庫前先把分行符號進行轉換
方法二,撈資料時轉換分行符號在輸出
這兩種看個人習慣,有人愛方法一,有人愛方法二
也有人直接轉成HTML,輸出時就不用管了
但這也要把輸入表單處理好,有很多套件可以直接拿來用,看哪一種套件適合樓主就用哪個
leo226 iT邦新手 4 級 ‧ 2020-03-13 14:45:42 檢舉
使用CSS語法可以解決此問題,感謝先進指點方向
.pre-text {
white-space: pre-line;
}
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答