一般的文字截断(适用于内联与块):
<span style="color: #800000;">.text-overflow </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">内联对象需加 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">31em</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 何问起 hovertree.com </span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> word-break</span>:<span style="color: #0000ff;">keep-all</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 不换行 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> white-space</span>:<span style="color: #0000ff;">nowrap</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 不换行 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 内容超出宽度时隐藏超出部分的内容 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> text-overflow</span>:<span style="color: #0000ff;">ellipsis</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。</span><span style="color: #008000;">*/</span> }
对于表格文字溢出的定义:
对于表格超出范围显示省略号
<span style="color: #008080;"> 1</span> <span style="color: #800000;">table</span>{ <span style="color: #008080;"> 2</span> <span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">30em</span>; <span style="color: #008080;"> 3</span> <span style="color: #ff0000;"> table-layout</span>:<span style="color: #0000ff;">fixed</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 </span><span style="color: #008000;">*/</span> <span style="color: #008080;"> 4</span> } <span style="color: #008080;"> 5</span> <span style="color: #008000;">/*</span> <span style="color: #008080;"> 6</span> <span style="color: #008000;">何问起 </span><span style="color: #008080;"> 7</span> <span style="color: #008000;">hovertree.com </span><span style="color: #008080;"> 8</span> <span style="color: #008000;">*/</span> <span style="color: #008080;"> 9</span> <span style="color: #800000;">td</span>{ <span style="color: #008080;">10</span> <span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">100%</span>; <span style="color: #008080;">11</span> <span style="color: #ff0000;"> word-break</span>:<span style="color: #0000ff;">keep-all</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 不换行 </span><span style="color: #008000;">*/</span> <span style="color: #008080;">12</span> <span style="color: #ff0000;"> white-space</span>:<span style="color: #0000ff;">nowrap</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 不换行 </span><span style="color: #008000;">*/</span> <span style="color: #008080;">13</span> <span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;">hidden</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 内容超出宽度时隐藏超出部分的内容 </span><span style="color: #008000;">*/</span> <span style="color: #008080;">14</span> <span style="color: #ff0000;"> text-overflow</span>:<span style="color: #0000ff;">ellipsis</span>;<span style="color: #008000;">/*</span><span style="color: #008000;"> 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。</span><span style="color: #008000;">*/</span> <span style="color: #008080;">15</span> }
需要你注意的是,这个CSS样式只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,
其它的浏览器文本超出指定宽度时会隐藏。

在Bootstrap4中实现多项目轮播的解决方案在Bootstrap4中实现多项目轮播并不是一件简单的事情。虽然Bootstrap...

如何实现鼠标滚动事件穿透效果?在我们浏览网页时,经常会遇到一些特别的交互设计。比如在deepseek官网上,�...

无法直接通过CSS修改HTML视频的默认播放控件样式。1.使用JavaScript创建自定义控件。2.通过CSS美化这些控件。3.考虑兼容性、用户体验和性能,使用库如Video.js或Plyr可简化过程。

在手机上使用原生select的潜在问题在开发移动端应用时,我们常常会遇到选择框的需求。通常情况下,开发者倾...

在手机上使用原生select的弊端是什么?在移动设备上开发应用时,选择合适的UI组件是非常重要的。许多开发者�...

使用Three.js和Octree优化房间内第三人称漫游的碰撞处理在Three.js中使用Octree实现房间内的第三人称漫游并添加碰�...

使用原生select在手机上的问题在移动设备上开发应用时,我们经常会遇到需要用户进行选择的场景。虽然原生sel...

探究鼠标滚动事件的实现原理在浏览一些网站时,你可能注意到某些页面元素在鼠标悬停时仍然允许滚动整个页...


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3汉化版
中文版,非常好用

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

WebStorm Mac版
好用的JavaScript开发工具

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具