diff --git a/README.md b/README.md index 19f227a..6f602bf 100644 --- a/README.md +++ b/README.md @@ -34,9 +34,10 @@ In some upcoming version it may be able to detect this value automatically. | property | type | default | description | | --- | --- | --- | --- | -| importCss | Boolean | false | Set to `true` in order to import styles into `` automatically, element.style is used by default +| 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 -| 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)` +| wordBreak | Boolean | `true` | Break words by using [`word-break`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) property. +| 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)` ### Caveats diff --git a/src/index.js b/src/index.js index 67d2f9a..fb5ea59 100644 --- a/src/index.js +++ b/src/index.js @@ -39,7 +39,7 @@ const truncateText = function(el, bindings, useFallbackFunc) { const VueLineClamp = { install(Vue, options) { options = Object.assign( - { importCss: false, textOverflow: 'ellipsis' }, + { importCss: false, textOverflow: 'ellipsis', wordBreak: true }, options ); @@ -48,7 +48,7 @@ const VueLineClamp = { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; - word-break: break-all; + ${options.wordBreak ? 'word-break: break-all;' : ''}; text-overflow: ${options.textOverflow}; `;