table文字超出显示省略号

更新时间:2023-07-23 18:08:53 阅读: 评论:0

table⽂字超出显⽰省略号tbale⽂字超出显⽰省略号
代码很简单,⼀个简单表格主要负责人 英语
设置表格的样式table-layout:"fixed"再设置表格的宽度(这步必须)
设置⽂字过长部分需要⽤到text-overflow标签,设置为 ellipsis,意思为⽂本超出部分为省略号;
设置整体为本过长需要⽤white-space标签,设置为 nowrap,意思是⽂本不换⾏;
同时需要设置整体标签超出部分为不显⽰,设置⽅法为:overflow: hidden;
camel
这样就ok了!
英语社区<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<title>Title</title>
</head>
default什么意思<style>
table{
table-layout: fixed;
width: 100%;
}
</style>
<body>
<table border="1px">
<tr id="test">
rvant<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>简介</td>cd rw
</tr>
<tr>
<td>⼤表格</td>
全面质量管理的特点
<td>23</td>
<td>男</td>
<td >
⾸先设置表格的样式table-layout:"fixed"再设置表格的宽度(这步必须)
在设置⽂字过长部分需要⽤到text-overflow标签,设置为 ellipsis,意思为⽂本超出部分为省略号;
同设置整体为本过长需要⽤white-space标签,设置为 nowrap,意思是⽂本不换⾏;
同时需要设置整体标签超出部分为不显⽰,设置⽅法为:overflow: hidden;
整体设置标签为:td {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
</td>
sway
</tr>
ladybirdcanceling</table>
</body>
</html>
图⽚

本文发布于:2023-07-23 18:08:53,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/90/186500.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:设置   超出   部分   整体   需要
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图