【CSS】文本效果

文本溢出、整字换行、换行规则以及书写模式

代码:

xml 复制代码
<style> 
p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

p.test3 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

p.test3:hover {
  overflow: visible;
}

p.test4 {
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  word-wrap: break-word;
}
</style>
</head>
<body>


<h2>text-overflow: clip:  裁剪</h2>
<p class="test1">这里有一些无法容纳在框中的长文本</p>

<h2>text-overflow: ellipsis 省略号(...)</h2>
<p class="test2">这里有一些无法容纳在框中的长文本</p>

<h2>text-overflow: visible 显示</h2>
<p class="test3">这里有一些无法容纳在框中的长文本</p>


<h2> word-wrap: break-word; 换行</h2>
<p class="test4">这里有一些无法容纳在框中的长文本</p>
</body>

渲染效果:

相关推荐
Csvn2 小时前
OpenSpec 详细使用教程
前端
王莎莎-MinerU3 小时前
MinerU 深度技术解析:从架构原理到生产部署的全面指南
css·人工智能·自然语言处理·架构·ocr·个人开发
之歆3 小时前
Day19_LESS 完全指南——从入门到工程实践
前端·css·less
云水一下4 小时前
HTML5 从入门到精通:实战收官——从零搭建完整静态网站,综合运用所有知识
前端·html5
不总是4 小时前
Windows 系统 Node.js 免安装版(zip)安装与配置教程(2026 最新)
前端·windows·node.js
冬奇Lab4 小时前
每日一个开源项目(第105篇):Twenty - 跳出 Salesforce 的圈套,定义现代开源 CRM
前端·后端·开源
zhangyao9403305 小时前
开发pc端时,表格的高度怎么设置才能铺满页面
前端·javascript·elementui
kjs--5 小时前
浏览器书签执行脚本
前端
之歆5 小时前
Day16_JavaScript 轮播图与事件工程实战(下篇)
服务器·开发语言·前端·javascript·网络·性能优化
沄媪5 小时前
CSRF 跨站请求伪造
前端·ctf·csrf