css省略号效果

最新推荐文章于 2023-01-08 20:39:27 发布
最新推荐文章于 2023-01-08 20:39:27 发布
阅读量63 收藏
点赞数
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>New Document </title>
    <style>
        .ctl
        {
            table-layout: fixed;
        }
        .xx
        {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            padding: 2px;
        }
        
        .ellipsis {width:50%;text-overflow:ellipsis; }/*just for ie*/
        ul
{
    padding: 0px;
    margin: 0px;
    list-style: none;padding-left:10px;
    
    
}
        li{
        
        
        width:90%;     
white-space:nowrap;     
text-overflow:ellipsis;     
-o-text-overflow:ellipsis;     
overflow: hidden;      
        }
        
    </style>
</head>
<body>

<div style="width:80%;border:1px solid red">
<ul>
        <li><span>1</span><span class="ellipsis">小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；</span></li>
        <li><span>1</span>小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；</li>
        <li><span>1</span>小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；</li>
        <li><span>1</span>小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；</li>
    </ul>
    </div>
    <table cellspacing="0" cellpadding="1" width="100%" class="ctl" border="1">
        <tbody>
            <tr>
                <td class="xx">
                    <a href="#"><font>小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；</font></a>
                </td>
                <td style="width:60px">
                    (1/1)
                </td>
            </tr>
            <tr>
                <td>
                    小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；
                </td>
                <td>
                    (1/1)
                </td>
            </tr>
            <tr>
                <td>
                    小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；
                </td>
                <td>
                    (1/1)
                </td>
            </tr>
            <tr>
                <td>
                    小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；小王童鞋是大坏蛋；
                </td>
                <td>
                    (1/1)
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
weixin_34148340
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css实现文本省略号
youlinhuanyan的博客
04-04 591
csdn 给了我们一个平台，让我们可以记录自己在工作学习中遇到的问题，哪怕是很小很小的问题，有时也值得你去记录… css实现文本过长，显示省略号 <style> .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } </style> <div ...
css控制文本实现越界省略号以及自动换行
09-25
因为表格默认会根据内容调整列宽，所以要固定列宽并实现省略号效果，需要设置`table-layout: fixed`，然后对每个单元格(`td`)应用上述的越界省略号样式： ```css table { width: 30em; /* 设置表格宽度 */ table-...
Css实现...省略号的效果
weixin_50643343的博客
01-08 5291
介绍：我们无论写练习或者写项目的时候，像用户名字过长或者文本信息过长需要用到省略号的效果，特此总结一下用法。是叭，我们给div加上overflow：hidden会隐藏掉，但是不太美观就需要用到省略号。还是先写基础代码，我们这次的div高度要大一些。本文分为单行省略号的实现和多行省略号的实现。
CSS-设置省略号
ydc222的博客
11-03 1万+
单行文本设置省略号 多行文本设置省略号
CSS 省略号（单行省略号、多行省略号）
热门推荐
Ares5k
04-09 7万+
单行超出省略号代替、多行超出省略号代替
省略号 方式的动态 的loading 效果
09-10
省略号样式的 动效，作为loading状态的过渡，自定义控件
CSS3线性圆形Loading加载动画特效
06-11
这是一款简单的CSS3线性圆形Loading加载动画特效，线性圆形转动和Loading文字省略号动画效果。
CSS 控制字符宽度省略号效果 兼容浏览器
09-27
兼容浏览器的CSS控制字符宽度省略号效果，是非常实用的，由于FF对溢出显示省略号的属性支持不好。因而在进行编码时，应用到了一个HACK和FF的私有属性，大家在学习时注意区别。 看下面的HTML代码：
CSS省略号text-overflow超出溢出显示省略号
12-04
标题和描述中提到的“CSS省略号text-overflow超出溢出显示省略号”是指在CSS样式中利用`text-overflow: ellipsis;`来实现当文本内容超出指定容器的宽度时，用省略号表示被截断的文本。 `text-overflow`属性有以下几...
css样式显示省略号自定义宽度超过隐藏显示省略标记
09-25
总结一下，通过组合使用CSS的`display`、`width`、`overflow`、`white-space`和`text-overflow`属性，我们可以实现当文本内容超过自定义宽度时，显示省略号的效果。这在网页设计中是一种实用的技术，能够有效地管理...
css里的省略号效果
xiaozhuangyumaotao的博客
05-01 426
在数据表格里面后者是其他页面里面，当一行容纳不下内容时，有两种解决方案，一种是自动换行，一种是使用省略号，那么这个省略号是怎么通过css的来实现的呢？效果如图所示： html代码如下： <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>省略号&...
css - 省略号效果
yuuuuchang的博客
01-13 1098
单行文本省略号white-space: nowrap; /*强制不换行*/ overflow: hidden; /*超出部分隐藏*/ text-overflow: ellipsis; /*超出部分显示省略号*/多行文本省略号(webkit浏览器和移动端适用)display: -webkit-box; -webkit-box-orient: vertical; /*子元素排列方...
CSS实现省略号
随心所欲的便笺
03-24 4557
省略号作用 在制作网页的时候，经常会遇到文字内容太多超出部分省略的情况。例如： 我们可以把这个类设置在公共样式里，需要的时候随时调用。 实现方法 .omit { width: 185px; /* 省略号的设置 前提：文本父级要有宽度 */ white-space: nowrap; /* 设置文本不换行 */ overflow: hidden; text-overflow: ellipsis; } ...
使用css实现省略号加载动画
weixin_46353030的博客
02-24 1949
环境 win10 vscode vue2.x 代码 <div class="dot"> 动态省略号 <span class="dot-ani"></span> </div> <style> .dot-ani { display: inline-block; height: 12px; line-height: 12px; overflow: hidden; } .dot-ani
No.12 css添加文段省略号效果
lzh131464的博客
12-31 90
在html中，为一个容器设置宽高后，容器内的内容如果过多，那么内容就会溢出容器；或者，有时候我们不希望容器占据那么大的位置，又想让别人知道容器的内容没有结束，那么就可以通过修改css来达成这个效果，解决问题。 格式语法： css选择器 {width:值; white-space:nowrap; overflow:hidden;
用CSS实现LOADING省略号动画
liushicen的博客
06-18 6472
这段CSS代码使用CSS3的帧动画来模拟loading文字后面的3个小省略号的动画效果。.loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: "\2026"; /* a
css 省略号动画
qq_45457134的博客
11-24 1110
<div class="text">加载中，请稍后<span class="dot">...</span></div> <style> .dot { font-family: simsun; /*固定字体避免设置的宽度无效*/ animation: dot 3s infinite step-start; display: inline-block; width: 1.5em; vertical-align:
8个Python小程序代码示例 新手小白也能实现-python小程序源代码
最新发布
07-20
python小程序代码： 8个Python小程序代码示例。新手小白也能实现_python小程序源代码
css省略号显示剩余文字
05-11
可以使用CSS中的text-overflow属性来实现省略号显示剩余文字。具体实现步骤如下： 1. 设置元素的宽度和高度，并且设置overflow属性为hidden，使得超出部分隐藏起来。 2. 设置text-overflow属性为ellipsis，用省略号代替被隐藏的文本。 3. 设置white-space属性为nowrap，使得文本不换行。 4. 最后，设置CSS属性word-wrap为break-word，防止单词被截断。 以下是一个简单的示例代码： ``` <style> .ellipsis { width: 200px; height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word; } </style> <div class="ellipsis"> 这是一段超长的文本内容，用来测试省略号显示效果。 </div> ``` 在这个示例中，如果文本内容超过了200px的宽度，就会自动省略显示，用省略号代替被隐藏的文本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值