diff --git a/README.md b/README.md index 19f227a..417eada 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ In some upcoming version it may be able to detect this value automatically. | --- | --- | --- | --- | | importCss | Boolean | false | Set to `true` in order to import styles into `` automatically, element.style is used by default | textOverflow | String | `ellipsis` | Set the value for [`text-overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) property in modern browsers +| wordBreak | String | `break-word` | Set the value for [`word-break`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) | fallbackFunc | Function | defaultFallbackFunc | Provide your own default method to handle the truncation strategy on unsupported browsers. Accepts all directive params: `element (Node)`, `bindings (Object)`, `lines (Number)` @@ -46,6 +47,8 @@ In some upcoming version it may be able to detect this value automatically. ### Changelog +**v1.6.0** - Implemented `wordBreak` option, refactored how the backup function is called + **v1.2.4** - Implemented `textOverflow` option. **v1.2.1** - Implemented `fallbackFunc` options, fixed multiple elements clamping on same page. diff --git a/src/index.js b/src/index.js index 67d2f9a..112e76b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ const currentValueProp = 'vLineClampValue'; -function defaultFallbackFunc(el, bindings, lines) { +function defaultFallbackFunc(el, bindings) { + let lines = parseInt(bindings.value); if (lines) { let lineHeight = parseInt(bindings.arg); if (isNaN(lineHeight)) { @@ -20,26 +21,21 @@ function defaultFallbackFunc(el, bindings, lines) { } } -const truncateText = function(el, bindings, useFallbackFunc) { +const truncateText = function(el, bindings) { let lines = parseInt(bindings.value); if (isNaN(lines)) { console.error('Parameter for vue-line-clamp must be a number'); return; } else if (lines !== el[currentValueProp]) { el[currentValueProp] = lines; - - if (useFallbackFunc) { - useFallbackFunc(el, bindings, lines); - } else { - el.style.webkitLineClamp = lines ? lines : ''; - } + el.style.webkitLineClamp = lines ? lines : ''; } }; const VueLineClamp = { install(Vue, options) { options = Object.assign( - { importCss: false, textOverflow: 'ellipsis' }, + { importCss: false, textOverflow: 'ellipsis', wordBreak: 'break-word' }, options ); @@ -48,7 +44,7 @@ const VueLineClamp = { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; - word-break: break-all; + word-break: ${options.wordBreak}; text-overflow: ${options.textOverflow}; `; @@ -65,9 +61,9 @@ const VueLineClamp = { } } - const useFallbackFunc = + const clampFunction = 'webkitLineClamp' in document.body.style - ? undefined + ? truncateText : options.fallbackFunc || defaultFallbackFunc; Vue.directive('line-clamp', { @@ -79,10 +75,10 @@ const VueLineClamp = { el.classList.add('vue-line-clamp'); } }, - inserted: (el, bindings) => truncateText(el, bindings, useFallbackFunc), - updated: (el, bindings) => truncateText(el, bindings, useFallbackFunc), + inserted: (el, bindings) => clampFunction(el, bindings), + updated: (el, bindings) => clampFunction(el, bindings), componentUpdated: (el, bindings) => - truncateText(el, bindings, useFallbackFunc), + clampFunction(el, bindings), }); }, };