文字超出宽度后显示 ... 效果

不正的个人博客 / 0 / 1 / 创建于 3年前

原效果：

文字超出后宽度后显示 ... 效果

实现效果：

文字超出后宽度后显示 ... 效果

代码：

<div> 打败苹果，十年巨亏，全球在线音乐第一股的转型之痛</div>

<style>
    div{
        width: 200px;
        white-space: nowrap; /* 文本不换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 文字超出部分显示为 ... */
    }
</style>

本作品采用《CC 协议》，转载必须注明作者和本文链接

敢于争先 @ 不正

版主 785 声望

最近还是一样努力着。

推荐文章：

更多推荐...

[感谢Summer大佬加精]，基于webman PHP极速后台开发框架了解一下！ 18 / 28 |

基于(tp5.1、tp6.0)后台开发框架(设计思路参考laravel-admin) 10 / 10 |

在多年 PHP 开发后，我学习了 6 个月的 Go 语言 16 / 5 |

令人期待的 PHP7.4 16 / 6 |

PHP 面试遇到的问题，后期会不定期更新一下，大家也可以把认为经典的问题评论留言，感谢大家！ 72 / 15 |

从 simplemde 写入 + inline-attachment 图片拖拽上传到 parsedown 解析 11 / 3 |

讨论数量: 1

勇敢的心

见习助教 848 声望

如果你是一个后端，不需要手写CSS，引入一个UI库就行了，把重点放到后端上

3年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

未填写

私信

文章归档

2 篇 2022 年 5 月 8 篇 2022 年 4 月 13 篇 2022 年 3 月 3 篇 2022 年 2 月

3年前 ThinkPHP 6 跳转提示扩展 liliuwei/thinkphp-jump 3年前文字超出宽度后显示 ... 效果 3年前 ThinkPHP 6.0 在 Nginx 下默认页面能访问，其他路由无法访问报错 404 问题 3年前 ThinkPHP 6.0 的 ThinkTemplate 模板继承 3年前 ThinkPHP 6.0 安装 think-view 扩展（报错：Driver [Think] not supported）

3 服务器 (Ubuntu 20.04) 手动部署 LNMP 3 Laravel 8 安装和卸载 Laravel Lang 语言包 2 Laravel 清除路由缓存 2 Laravel 路由 resource 方法：定义用户资源路由 2 Bootstrap 4 实现导航栏右侧对齐

成为赞助商