iT邦幫忙

0

詢問html或css可以如何設定不會使字串斷行(使用<div>)

  • 分享至 

  • xImage

不好意思,不知道標題這樣下是否明確...
目前在View上寫了一個@helper,在此方法中組一個字串strTitle為傳入的title變數以及1000個.,然後在html中給予CSS設定overflow:hidden;,但它會讓我傳入的字串title斷行,目前卡在這個問題很久,一直沒有嘗試出期望結果,想詢問可以怎麼調整比較好呢?

@helper程式碼:

@helper GetFormate(string title, string content){
    string strTitle=title;
    char pad = '.';
    strTitle=strTitle.PadRight(1000, pad);

    <div class='div_tr'>
        <div class='div_td' style='width:100%;border-right:none;'>
            @strTitle
        </div>
        <div class='div_td' style='width:3%;border-right:none;border-left:none;)'>:</div>
        <div class='div_td' style='width:60%;border-left:none;'>
        @content
        </div>
    </div> 
}

CSS設定

<style>
    .div_table {
        display: table;
        width: 100%;
        border-collapse:collapse;
        border-spacing: 2px;
        border: solid windowtext 1px; 
        margin:-1px 0 0 -1px;
        table-layout: fixed;
    }
    .div_tr {
        display: table-row;
    }
    .div_td {
        display: table-cell;
        overflow:hidden;
        height: 20px;
        padding: 3px 3px 3px 3px;
        border: solid windowtext 1px;
        font-size: 10px;
        font-family: Arial;
        text-align: left;
        vertical-align: top;
    }
</style>

呼叫@helper程式碼:

<div class='div_table'>
    @GetFormate("Report Number","A000001")
</div>

目前結果與期望結果:
https://ithelp.ithome.com.tw/upload/images/20191001/20115336YpdZhcMQhC.jpg

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
YoChen
iT邦研究生 1 級 ‧ 2019-10-01 15:56:48
最佳解答

請嘗試設定style

white-space: nowrap;
anniecat iT邦新手 3 級 ‧ 2019-10-01 16:05:37 檢舉

感謝您的幫忙!

0
咖咖拉
iT邦好手 1 級 ‧ 2019-10-01 15:50:50

看錯 ~ 自刪

我要發表回答

立即登入回答