javascript option 菜单图标_善用 CSS，不用 JavaScript 也能写出这些元素

想要不用 JavaScript 又写出酷炫的界面交互元素吗？小编吐血整理教你几招如何用纯 CSS 写出文本截断，下拉菜单....

我们已经习惯了用 JavaScript 编写常见的一些 UI 元素，比如手风琴，工具提示，文本截断等。但是随着 HTML 和 CSS 也进化出了新的功能，旧版本的浏览器也不再受到支持，这些 UI 元素中越来越多的部分可以完全不使用 JavaScript 来完成，而我们更能将 JS 重心放在代码的逻辑部分上，例如验证和数据交互等。

其中某些解决方案确实会让人感到棘手并且不是很灵活，但对于小型项目中的单例元素而言，它们可能很有用。没有必要为了一个网页上的手风琴菜单而用 JavaScript(或者甚至用 jQuery)写一个函数，至少我在为一个个人网站移动版的顶部添加菜单时是这么思考的。

响应式文本截断

CSS 文本截断实现起来非常简单，并且性能很高，因为我们不会编辑到文本的 HTML 内容而仅仅编辑其渲染。虽然单行文字截断在老浏览器汇总支持不错，多行文本截断却只在新浏览器中被支持，下面分别是运行结果，CSS 和 HTML 代码：

With Flexbox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae euismod nulla, sed consequat ante. Proin convallis, ex a maximus pellentesque, ante lectus convallis ante, egestas lacinia mauris augue sit amet nisi. Aliquam pellentesque, arcu eu efficitur elementum, nunc lacus accumsan justo, in egestas erat orci ut ante proin quis maximus neque. Aliquam sed mollis velit. Mauris egestas semper viverra. Ut vel dapibus mauris. Pellentesque bibendum nunc consectetur velit malesuada, quis consectetur tellus volutpat.

With Table

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae euismod nulla, sed consequat ante. Proin convallis, ex a maximus pellentesque, ante lectus convallis ante, egestas lacinia mauris augue sit amet nisi. Aliquam pellentesque, arcu eu efficitur elementum, nunc lacus accumsan justo, in egestas erat orci ut ante. Proin quis maximus neque. Aliquam sed mollis velit. Mauris egestas semper viverra. Ut vel dapibus mauris. Pellentesque bibendum nunc consectetur velit malesuada, quis consectetur tellus volutpat.

Bonus: Multiline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae euismod nulla, sed consequat ante. Proin convallis, ex a maximus pellentesque, ante lectus convallis ante, egestas lacinia mauris augue sit amet nisi. Aliquam pellentesque, arcu eu efficitur elementum, nunc lacus accumsan justo, in egestas erat orci ut ante proin quis maximus neque. Aliquam sed mollis velit. Mauris egestas semper viverra. Ut vel dapibus mauris. Pellentesque bibendum nunc consectetur velit malesuada, quis consectetur tellus volutpat.