通常做firefox的
文字溢出显示省略号会用xul的hack,但是有个条件如果没有满足就会失效,使内容变成空白。
这个条件是:
引用
引用包含-moz-binding的css的页面必须与该css文件同域,并且也要和ellipsis的xml文件同域
也就是说下面这种情况会失效:
引用
http://
domain1.company.com/some-page.htm
引用
<link rel=stylesheet href=http://domain2.company.com/public/css/ellipsis.css />
<span class=ellipsis style=width:200px>This is a very very very very very very very very very very long sentence</span>
引用
http://
domain2.company.com/public/css/ellipsis.css
引用
.ellipsis {
-moz-binding: url(ellipsis.xml#ellipsis);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: normal;
line-height: inherit;
}
引用
http://
domain2.company.com/public/css/ellipsis.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>
<xul:window>
<xul:description crop="end" xbl:inherits="value=xbl:text">
<children/>
</xul:description>
</xul:window>
</content>
</binding>
</bindings>
在有些部署场景,静态文件和引用页面的路径不是
全域名匹配的,比如静态文件会部署到不同次级域名的CDN,这种情况下就只能把ellipsis.css的内容以style形式写在页面里了
原文:
http://mattlaine.com/blog/?p=49
分享到:
相关推荐
NULL 博文链接:https://zsp.iteye.com/blog/261175
这个插件允许缩短您的文字,如果它很长的话。原来的文本可以通过鼠标悬停在缩短中看到的一样。这是一个简单但非常有用的插件。
文字省略号 如果太长,请剪掉一根绳子 为什么 您总是想切断长字符串。 安装 $ npm install --save text-ellipsis 用法 ...var short = ellipsis ( 'a very long text' , 10 , { ellipsis : ' END' }
Ellipsed is a JavaScript library for generating multi-lined ellipsed text. Indicating the number of visible lines, it will truncate the text at the correct position in targeted elements.
无hack无js实现省略号效果,完全兼容text-overflow-ellipsis效果
Ellipsis = require ( 'react-ellipsis' ) ( React ) ; 也可用于AMD(例如 ) 在这种情况下,将取决于react 。 在JSX中使用 < Ellipsis xss=removed> <!-- component defaults to <div> --> text </ E
Ellipsis.js Ellipsis.js是一个纯Javascript库,用于在一些复杂的DOM元素(例如多行div或带有子元素(链接,跨度等)的元素)上添加省略号。 该库是完全响应式的,可在所有主要版本上使用。Ellipsis.js Ellipsis.js...
省略号 vue2.js的多行省略号组件特征支持Vue2.js 小型2KB(压缩后的1KB)安装NPM $ npm install vue-ellipsis --save纱$ yarn add vue-ellipsis凉亭$ bower install vue-ellipsis省略号组件属性范围描述类型默认必需...
function DrawVistaText(Canvas: TCanvas Alignment: TAlignment r: TRect FCaption:string AFont: TFont Enabled: Boolean RealDraw: Boolean AntiAlias: TAntiAlias Direction: TTabPosition Ellipsis: Boolean):...
超过宽度显示省略号(无js无hack全兼容) .
npm install --save react-lines-ellipsis 用法 import LinesEllipsis from 'react-lines-ellipsis' < LinesEllipsis text = 'long long text' maxLine = '3' ellipsis = '...' basedOn = 'letters'> 选项 props....
在 Python 的基本类型中单例模式的值有三个 None 类型的 None ,NotImplemented 类型的 NotImplemented, Ellipsis 类型的 … 。 None 已经用的烂大街了,NotImplemented 也比较常用,唯独 … 在江湖上只知它是三巨头...
jquery.ellipsis - jQuery 的省略号插件jquery.ellipsis 可以使用省略号 (...) 或其他一些标记来隐藏内容。 单击后,它将显示其余内容。
安装要在现有的角度项目中使用,请运行npm install ngx-ellipsis --save 。 然后将已安装的模块添加到您的app.module.ts : import { EllipsisModule } from 'ngx-ellipsis' ;// ...@ NgModule ( { // ... imports :...
$('#target').ellipsis(); 在两条或多条线的情况下适合两条线 $('#target').ellipsis({ row: 2 }); 更改省略号 $('#target').ellipsis({ row: 2, char: '**' }); 只包含完整的单词(删除末尾的单词片段) $...
资源来自pypi官网。 资源全名:ellipsis-1.2.15.tar.gz
Vue文本省略组件
yarn add react-middle-ellipsis 用法 import ,您可以使用包装任何节点。 这将计算周围父节点的宽度。 然后,它将查找子节点(因此请确保在内部最小添加一个span ):它将使用此元素来计算子节点的宽度,然后缩短其...
React多行省略号React高阶组件以创建多行椭圆形框。... import React , { Component , PropTypes } from 'react'import { ellipsis } from 'react-multiline-ellipsis'class MyTextBox extends Componen