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; 一起使用 */


传送门 =>

CSS word-break 属性
CSS white-space 属性
CSS text-overflow 属性


借鉴这位大佬的:https://www.bbsmax.com/A/q4zVDDvj5K/
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐