搜尋

首頁  >  問答  >  主體

如何防止HTML/CSS中帶有破折號的表格儲存格自動換行?

<p>我知道我的問題看起來與這個問題非常相似:如何防止表格單元格中的文字換行,這是我第一個檢查的。 </p> <p>我有一個表格,在其中一個欄位中我將寫入一個很長的描述,下一列是日期。瀏覽器認為把日期列換行是很酷的,因為它們是用破折號分隔的字串。目前我有這樣的內容:</p> <pre class="brush:php;toolbar:false;">| 說明 | Date | |----------------------------|----------| | This is a really long | 2022-10- | | description cell with many | 12 | | lines... | |</pre> <p>我如何告訴瀏覽器我希望我的描述單元格稍微短一些,日期列不換行。在我閱讀的解決方案中,它說你應該使用<code><td wrap="nowrap"></code>,這對於空格有效,但對於破折號無效。 </p> <p>我應該使用不收縮的彈性元素嗎? </p> <hr /> <p>透過縮短描述,我是指:</p> <pre class="brush:php;toolbar:false;">| 說明 | Date | |--------------------------|------------| | This is a really long | 2022-10-12 | | description cell with | | | many lines... | |</pre></p>
P粉254077747P粉254077747456 天前710

全部回覆(2)我來回復

  • P粉133321839

    P粉1333218392023-08-30 00:08:37

    你應該為日期列使用white-space: nowrap;。當你說你想要描述單元格更短時,我不確定你的意思是什麼?只需調整寬度以獲得所需的結果。

    回覆
    0
  • P粉340980243

    P粉3409802432023-08-30 00:04:43

    只需在CSS中新增 white-space:nowrap,它將使所有內容都在一行上顯示。請參閱下方

    table {
      border-collapse: collapse;
      width: 100px;
    }
    
    td {
      border: 1px solid gray;
      padding: 0.25rem 0.5rem;
    }
    
    td:last-child {
      white-space: nowrap;
    }
    <table>
      <tr>
        <td>Description</td>
        <td>Date</td>
      </tr>
      <tr>
        <td>This is a really long description cell with many lines</td>
        <td>2022-10-12</td>
      </tr>
    </table>

    回覆
    0
  • 取消回覆