Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
dom-text-ellipsis
Advanced tools
Readme
a text-ellipsis plugin with common js use.
The situation when you need text ellipsis more then one line and the browser doesn't support the css style -webkit-line-clamp
.
This lib hasn't add the test of -webkit-line-clamp
.If you are using mobile browsers, use -webkit-line-clamp
instead.
npm install --save-dev dom-text-ellipsis
If you are using Vue, use the package vue-text-ellipsis instead.
import ellipsis from 'dom-text-ellipsis';
ellipsis.config({
lineNum: 2,
fontFamily: 'microsoft yahei',
fontWeight: 'bold',
fontSize: '14px',
left: '...',
tagName: 'p',
resize: false,
});
const ells = document.querySelectorAll('.ell');
ellipsis.init(ells);
<div class="par">
<div class="ell" lineNum="4" text="这是一句很长很长的话,到底有多长呢 自己感受一下 够长了吧 还没感受到?那再感受下"></div>
</br>
<div class="ell" lineNum="4" text="这是一句很长很长的话,到底有多长呢 自己感受一下 够长了吧 还没感受到?那再感受下" resize="true"></div>
</div>
You can add config when ellipsis.config
to set global-config or use the attribute on vue elempent.
Props | Type | Default | Effect |
---|---|---|---|
width | String | The parentsElement's offsetWidth. | The max width for one line. |
lineNum | Number | 2 (from global config) | The max line. |
fontFamily | String | microsoft yahei (from global config) | The fontFamily to calculate the width. |
fontSize | String| Number | 14px (from global config) | The fontSize to calculate the width. |
tagName | String | p (from global config) | The tag to show the text. |
left | String | '…' (from global config) | The String add on the end of the last line. |
resize | Boolean | False (from global config) | Add the eventListener resize to window to watch the window change. |
Method | Args | Effect |
---|---|---|
config | Object: obj | Update the global config. |
init | NodeList: doms | HTMLElement: dom | Init the ellipsis dom by the config global and attribute both. |
watch | NodeList: doms | HTMLElement: dom | init the ellipsis dom and watch the change of attribute. |
FAQs
a text-ellipsis plugin with common js use.
The npm package dom-text-ellipsis receives a total of 3 weekly downloads. As such, dom-text-ellipsis popularity was classified as not popular.
We found that dom-text-ellipsis demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.