css溢出省略号_带有CSS省略号的优雅溢出

css溢出省略号

9/27/2011: As of Today, Firefox 7 supports this text-overflow: ellipsis.

2011年9月27日：截至今天，Firefox 7支持text-overflow: ellipsis 。

Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were breaking the table display. The obvious solution was adding an overflow: hidden setting to the table cells, but even then the text looked unnaturally cut off. The way to make text overflow elegant is with ellipses, and CSS' text-overflow property. Let's check it out!

文本溢出始终是一个大问题，尤其是在编程环境中。 总是只有这么多空间，但可变的内容要添加到该空间中。 我最近正在处理用于显示用户信息的表，并注意到较长的字符串破坏了表的显示。 显而易见的解决方案是添加一个overflow: hidden对表格单元格进行overflow: hidden设置，但是即使如此，文本看起来还是被自然地切断了。 使文本溢出优雅的方法是使用省略号和CSS的text-overflow属性。 让我们来看看！

View Demo 观看演示

CSS (The CSS)

The CSS behind creating ellipses is quite simple, combining width, wrapping, overflow, and text-overflow:

创建省略号CSS非常简单，结合了宽度，环绕，溢出和文本溢出：

.dataTable td {
	/* essential */
	text-overflow: ellipsis;
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	
	/* for good looks */
	padding: 10px;
}

Setting the width provides the obvious boundary for, white-space prevents normal next-line wrapping, hiding overflow ensures the width dimension is respected, and the text-overflow setting provides the ellipsis. Great, right? But there's a problem...

设置宽度提供了明显的边界，空格防止了正常的下一行换行，隐藏溢出确保了宽度尺寸的遵守，而文本溢出设置则提供了省略号。 太好了吧？ 但是有个问题

Firefox和省略号 (Firefox and Ellipsis)

Unfortunately Firefox doesn't currently support text-overflow:ellipsis. There's one simple solution for Firefox provided by the Dojo Toolkit: dojox.html.ellipsis. This resource uses an iFrame shim to create the ellipsis. Here's how to use it:

不幸的是，Firefox当前不支持text-overflow：省略号。 Dojo工具包为Firefox提供了一个简单的解决方案： dojox.html.ellipsis 。 此资源使用iFrame填充程序创建省略号。 使用方法如下：

// require the resource
dojo.require("dojox.html.ellipsis");

After requiring the JavaScript resource, it's time to place a dojoxEllipsis node within the page, signaling that the dojox.html.ellipsis resource should ellipsize it:

在需要JavaScript资源之后，是时候在页面中放置一个dojoxEllipsis节点了，表明dojox.html.ellipsis资源应该将其省略掉：

   
   

    
    Pellentesque habitant morbi tristique senectus et netus et malesuada...
   
   

Any time the DOM tree is modified, Dojo scours the page for elements with the dojoxEllipsis CSS class and ellipsizes them.

dojoxEllipsis修改DOM树时，Dojo都会使用dojoxEllipsis CSS类在页面上搜索元素并将其dojoxEllipsis 。

View Demo 观看演示

Implementing dynamic ellipses for content is a simple, subtle, and effective way of elegantly managing content within an confined. With the exception of Firefox, text-overflow:ellipsis is supported by the major browser vendors. Dojo's implementation is stable and effective but can slow down the page if there are many ellipsized elements on a page. Happy ellipsizing!

为内容实施动态省略号是在受限环境中优雅地管理内容的一种简单，细微而有效的方法。 除Firefox外，主要的浏览器供应商都支持text-overflow：省略号。 Dojo的实现是稳定且有效的，但是如果页面上有许多椭圆元素，则会降低页面速度。 椭圆快乐！

翻译自: https://davidwalsh.name/css-ellipsis

css溢出省略号