什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替。
这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一行显示过长或者自动换行。可是有的时候我们就想在固定宽度的一行中显示,如果多出的部分那就用点点点代替,这样就不会撑乱表格了。那么该如何做呢?
一般来说我们会用到如下属性
系统前端采用可视化布局,能自动适应不同尺寸屏幕,一起建站,不同设备使用,免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式,让用户以最快的速度找到所需行程,大幅提高效率。系统可设置推荐、优惠行程,可将相应行程高亮显示,对重点行程有效推广,可实现网站盈利。系统支持中文、英文,您还可以在后台添加新的语言,关键字单独列出,在后台即可快速翻译。
150
<span style="color: #008000;">/*</span><span style="color: #008000;">溢出部分样式</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.txt-ell </span>{<span style="color: #ff0000;">
white-space</span>:<span style="color: #0000ff;">nowrap</span>;<span style="color: #ff0000;"> //强制在一行显示
overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #ff0000;"> //溢出的内容切割隐藏
text-overflow</span>:<span style="color: #0000ff;">ellipsis</span>;<span style="color: #ff0000;"> //当内联溢出块容器时,将溢出部分替换为…
word-break</span>:<span style="color: #0000ff;">keep-all</span>;<span style="color: #ff0000;"> //允许在单词内换行
color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;"> //这里我自己标识一下
padding</span>:<span style="color: #0000ff;"> 0 7px</span>;<span style="color: #ff0000;"> //由于想跟边线留有距离,所以设置了下
</span>}<span style="color: #800000;">.table-fix </span>{<span style="color: #ff0000;">
table-layout</span>:<span style="color: #0000ff;">fixed</span>;
}首先第二个样式是专门给table标签加的,想要实现内容溢出,那么表格必须有固定的宽高,表格内部的tr,td也要有固定的宽高。在用内容溢出之前,先要给table添加table-fix这个类。然后检查自己的tr,td有没有给width,如果没有的话,最好是给个吧,固定的也行,百分比的也行,我主要给的百分比,外边table给固定宽度,里面的tr和td就是百分比的宽度,这样才能使用内容溢出样式。最后如果哪个格子里面的内容非常的多,你想实现点点点,就给这个格子添加一个.txt-ell的类吧
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号