css一行顯示文字

黑白棋学弟發表於2024-03-29
CSS

1.例如 p元素，裡面的文字不換行顯示，超出部分不隱藏

p{
  width:100px;
  word-break:keep-all;
  white-space:nowrap;     
}

2.例如 p元素，裡面的文字不換行，超出部分用省略號代替

p{
  width:100px;
  word-break:keep-all;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis; 
}

說明：
word-break:keep-all; /* 不換行 / => 只能在半形空格或連字元處換行
white-space:nowrap; / 不換行 / => 規定段落中的文字不進行換行
overflow:hidden; / 內容超出寬度時隱藏超出部分的內容 /
text-overflow:ellipsis;
/ 當物件內文字溢位時顯示省略標記(…) ; 需與 overflow:hidden; 一起使用 */

相關文章