From 762e440c6c92a02588786a0fde65bcae58064df0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Garci=CC=81a=20Iglesias?= Date: Mon, 4 Feb 2019 13:25:16 -0300 Subject: [PATCH 1/2] Add 'wordBreak' option to prevent cutting words --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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}; `; From 0bb355a2098b8ced8185dcf8e4787652a6a1cc36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Garci=CC=81a=20Iglesias?= Date: Mon, 4 Feb 2019 14:02:15 -0300 Subject: [PATCH 2/2] Add `wordBreak` option to README.md --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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