在对应的文字父级标签中添加 css white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
<!DOCTYPE html> <html> <head> <title>div 文字溢出文字自动隐藏</title> </head> <body> <div style="border:1px solid red;width:100%; white-space:nowrap;text-overflow:ellipsis;overflow:hidden; "> <!-- <a href="http://www.baidu.com" title='div 文字溢出文字自动隐藏'>工程师思维的核心正是模块化系统思维。这不是一项单一的才能，而是技术与原则的融合。系统性思考不仅要做到有系统，有条理，它更需要理解你在生活的起起落落中，没有什么事物是真正静止的，一切皆有关联。一个系统因其各个模块之间的关系而成为一个整体，这样的整体是不能通过单独分析各组成部分就能理解的。 模块化系统思维的一种特殊技巧是解构（把一个较大的系统打散成一个个模块）和重构（把这些模块重新组合起来）的功能性组合。其重点是确定哪些是强连接，哪些是弱连接（模块如何运作、如何不运作或如何才能运作），以及如何把这一知识变成对工程是有用的结果。一个相关的设计理念是逐步求精，这是软件工程师所常用的。工程师对一种产品或服务所做的每一步改进，都会促成一个更好的结果或有助于替代方案的开发。即便在这个产品开发框架中，也有一种自上而下的设计策略 ---- “分而治之”，分别解决每个子任务，逐步进展，直至实现最终目标。此方法相对的是自下而上的设计策略，即把各个模块重新组合起来。 </a> --> <p style="border:1px solid red;width:100%; white-space:nowrap;text-overflow:ellipsis;overflow:hidden; ">工程师思维的核心正是模块化系统思维。这不是一项单一的才能，而是技术与原则的融合。系统性思考不仅要做到有系统，有条理，它更需要理解你在生活的起起落落中，没有什么事物是真正静止的，一切皆有关联。一个系统因其各个模块之间的关系而成为一个整体，这样的整体是不能通过单独分析各组成部分就能理解的。 模块化系统思维的一种特殊技巧是解构（把一个较大的系统打散成一个个模块）和重构（把这些模块重新组合起来）的功能性组合。其重点是确定哪些是强连接，哪些是弱连接（模块如何运作、如何不运作或如何才能运作），以及如何把这一知识变成对工程是有用的结果。一个相关的设计理念是逐步求精，这是软件工程师所常用的。工程师对一种产品或服务所做的每一步改进，都会促成一个更好的结果或有助于替代方案的开发。即便在这个产品开发框架中，也有一种自上而下的设计策略 ---- “分而治之”，分别解决每个子任务，逐步进展，直至实现最终目标。此方法相对的是自下而上的设计策略，即把各个模块重新组合起来。</p> </div> <br><br> <div style="border:1px solid green;"> <h1 style="border:1px solid red;width:100%; white-space:nowrap;text-overflow:ellipsis;overflow:hidden; ">工程师思维的核心正是模块化系统思维。这不是一项单一的才能，而是技术与原则的融合。系统性思考不仅要做到有系统，有条理，它更需要理解你在生活的起起落落中，没有什么事物是真正静止的，一切皆有关联。一个系统因其各个模块之间的关系而成为一个整体，这样的整体是不能通过单独分析各组成部分就能理解的。 模块化系统思维的一种特殊技巧是解构（把一个较大的系统打散成一个个模块）和重构（把这些模块重新组合起来）的功能性组合。其重点是确定哪些是强连接，哪些是弱连接（模块如何运作、如何不运作或如何才能运作），以及如何把这一知识变成对工程是有用的结果。一个相关的设计理念是逐步求精，这是软件工程师所常用的。工程师对一种产品或服务所做的每一步改进，都会促成一个更好的结果或有助于替代方案的开发。即便在这个产品开发框架中，也有一种自上而下的设计策略 ---- “分而治之”，分别解决每个子任务，逐步进展，直至实现最终目标。此方法相对的是自下而上的设计策略，即把各个模块重新组合起来。</h1> </div> </body> </html>
