CSS实现单行、多行文本溢出显示省略号（…）

最新推荐文章于 2023-07-03 15:55:35 发布

发呀发呀哈哈

最新推荐文章于 2023-07-03 15:55:35 发布

阅读量413

点赞数 1

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_67401545/article/details/126099062

版权

本文详细介绍了如何使用CSS实现单行和多行文本超出显示省略号的效果，包括不同浏览器的兼容性解决方案，适用于前端开发。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、单行超出显示省略号

描述：如果文字超出父元素指定宽度，文字会自动换行，而连续不间断数字和英文字母（没有其他字符）不会自动换行；
详细步骤：

第一步(不换行)：white-space:nowrop;（对于连续的数字或者英文字母可省略）
第二步（溢出隐藏）overflow:hidden;
第三步（文本溢出显示省略号）text-overflow：ellipsis;(省略号)

直接看代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单行省略号</title>
  <style>
    .app {
      width: 400px;
      height: 28px;
      line-height: 28px;
      margin: 50px 0 0 50px;
      border: 1px solid red;
      white-space: nowrap;
      overf