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

posted @   黑白棋学弟  阅读(144)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示