网站首页 网站建设 IT知识 IT知识教程 CSS超出文本指定宽度用省略号代替和文本不换行

CSS超出文本指定宽度用省略号代替和文本不换行

2021-05-08 21:10:33

一般的文字截断（适用于内联与块）：

CSS Code复制内容到剪贴板
  • .text-overflow{
  • display:block;
  • width:31em;
  • word-break:keep-all;
  • whitewhite-space:nowrap;
  • overflow:hidden;
  • text-overflow:ellipsis;
  • }

    • 对于表格文字溢出的定义：

    对于表格超出范围显示省略号

    CSS Code复制内容到剪贴板
  • table{
  • width:em;
  • table-layout:fixed;
  • }
  • td{
  • width:%;
  • word-break:keep-all;
  • whitewhite-space:nowrap;
  • overflow:hidden;
  • text-overflow:ellipsis;
  • }

    • 需要你注意的是，这个CSS样式只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。

    这个写法只有IE会有“...”，其它的浏览器文本超出指定宽度时会隐藏。

    以上所述是针对CSS超出文本指定宽度用省略号代替和文本不换行的相关介绍，希望对大家有所帮助，同时也非常感谢大家对网站的支持！

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章

    CSS文本超出div或者span时用省略号代替
    在项目中我们经常需要在文本过长时显示，将文本超出的部分内容用省略号代替：思想为：首先设置宽度，然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行具体c
    CSS文本超出2行就隐藏并且显示省略号
    超出一行隐藏:overflow:hidden;//超出的文本隐藏text-overflow:ellipsis;//溢出用省略号显示white-space:now
    html中的div、td 、p 等容器内强制换行和不换行的实现
    1、强制不换行，同时以省略号结尾。复制代码代码如下:你好朋友朋友朋友我为什么不能看到效果啊2、css自动换行复制代码代码如下:div{word-wrap:bre
    移动端的text-overflow多行文本溢出显示省略号(…)
    大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。o
    css样式显示省略号自定义宽度超过隐藏显示省略标记
    用css样式显示省略号，记复制代码代码如下:.xx{display:block;width:200px;overflow:hi

    最新文章

    载入进度条 效果
    邮件发送简单例子-html文件
    详解关于html，css，js三者的加载顺序问题
    限制复选框的最大可选数
    随鼠标上下滚动的jquery代码

    hot 热门文章

    python模拟登陆Tom邮箱示例分享
    苹果11抖音怎么投屏? iphone将投影投屏到电视的技巧
    蚂蚁森林节气签怎么领
    华为mate30怎么更新系统？华为mate30更新手机系统教程
    小米电视怎么下载斗鱼

    猜你喜欢

    JavaScript 命名空间 使用介绍
    javascript ���名规则 变量命名规则
    javascript 秒表计时器实现代码
    Javascript 面向对象之重载
    JavaScript 面向对象之命名空间
    以上产品还未完全满足我的所有需求，在下方提交我的专属需求
    我的专属需求：
    *手机号：
    *验证码：
    img
    咨询报价
    现在咨询
    img

    在线咨询

    建站在线咨询
    img

    获取方案

    获取建站报价/方案

    我们联系您img

    img

    微信咨询

    扫一扫添加
    动力姐姐微信
    img
    img

    TOP

    我们尽快联系您