Skip to content

Commit 3fb5a75

Browse files
FrondorFrondor
committed
feature(options): add textOverflow option
1 parent 78271d3 commit 3fb5a75

File tree

7 files changed

+177
-169
lines changed

7 files changed

+177
-169
lines changed

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,19 @@ In some upcoming version it may be able to detect this value automatically.
3535
| property | type | default | description |
3636
| --- | --- | --- | --- |
3737
| importCss | Boolean | false | Set to `true` in order to import styles into `<head>` automatically, element.style is used by default
38+
| textOverflow | String | `ellipsis` | Set the value for [`text-overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) property in modern browsers
3839
| 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)`
3940

4041

4142
### Caveats
4243

43-
Probably there may be problems when loading custom fonts. I've done some tests and couldn't detect any inconsistence so far, so feel free to open an issue and provide code to reproduce any bug or glitch you find.
44+
1. Probably there may be problems when loading custom fonts. I've done some tests and couldn't detect any inconsistence so far, so feel free to open an issue and provide code to reproduce any bug or glitch you find.
45+
2. The fallback method for older browsers won't show up the ellipsis (`...`) since we can't control the part of the text node that may get "clamped".
4446

4547
### Changelog
4648

49+
**v1.2.4** - Implemented `textOverflow` option.
50+
4751
**v1.2.1** - Implemented `fallbackFunc` options, fixed multiple elements clamping on same page.
4852

4953
**v1.2** - Lines parameter passed to `v-line-clamp` is now reactive.

‎dev/index.html‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,41 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<!-- THIS FILE IS USED FOR DEVELOPMENT -->
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width">
7-
<title>Vue Line Clamp - A multi-line ellipsis for Vue</title>
8-
</head>
9-
<body>
10-
<div id="app">
11-
<label for="range">Number of lines: {{ lines }} </label> <br>
12-
<input type="range" v-model="lines" min="0" max="5" id="range">
13-
14-
<p v-line-clamp:26="lines" style="width: 200px">
15-
Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati.
16-
</p>
17-
18-
<p v-line-clamp:26="1" style="width: 200px">
19-
Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati.
20-
</p>
21-
22-
<p v-line-clamp:26="lines" style="width: 200px">
23-
Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati.
24-
</p>
25-
</div>
26-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
27-
<script src="dist/vue-line-clamp.umd.js"></script>
28-
<script>
29-
Vue.use(VueLineClamp, {
30-
importCss: false
31-
})
32-
33-
new Vue({
34-
el: '#app',
35-
data: {
36-
lines: 2
37-
}
38-
})
39-
</script>
40-
</body>
41-
</html>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<!-- THIS FILE IS USED FOR DEVELOPMENT -->
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width">
7+
<title>Vue Line Clamp - A multi-line ellipsis for Vue</title>
8+
</head>
9+
<body>
10+
<div id="app">
11+
<label for="range">Number of lines: {{ lines }} </label> <br>
12+
<input type="range" v-model="lines" min="0" max="5" id="range">
13+
14+
<p v-line-clamp:26="lines" style="width: 200px">
15+
Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati.
16+
</p>
17+
18+
<p v-line-clamp:26="1" style="width: 200px">
19+
Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati.
20+
</p>
21+
22+
<p v-line-clamp:26="lines" style="width: 200px">
23+
Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati.
24+
</p>
25+
</div>
26+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
27+
<script src="dist/vue-line-clamp.umd.js"></script>
28+
<script>
29+
Vue.use(VueLineClamp, {
30+
importCss: false
31+
})
32+
33+
new Vue({
34+
el: '#app',
35+
data: {
36+
lines: 2
37+
}
38+
})
39+
</script>
40+
</body>
41+
</html>

‎dist/vue-line-clamp.cjs.js‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,84 @@
11
'use strict';
22

3-
const css = 'display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis';
43
const currentValueProp = "vLineClampValue";
54

65
function defaultFallbackFunc(el, bindings, lines) {
7-
if(lines){
6+
if (lines) {
87
let lineHeight = parseInt(bindings.arg);
98
if (isNaN(lineHeight)) {
10-
console.warn('line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px');
9+
console.warn(
10+
"line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px"
11+
);
1112
lineHeight = 16;
1213
}
1314

1415
let maxHeight = lineHeight * lines;
1516

16-
el.style.maxHeight = maxHeight ? maxHeight+'px' : '';
17-
el.style.overflowX = 'hidden';
18-
el.style.lineHeight = lineHeight+'px'; // to ensure consistency
17+
el.style.maxHeight = maxHeight ? maxHeight + "px" : "";
18+
el.style.overflowX = "hidden";
19+
el.style.lineHeight = lineHeight + "px"; // to ensure consistency
1920
} else {
20-
el.style.maxHeight = el.style.overflowX = '';
21+
el.style.maxHeight = el.style.overflowX = "";
2122
}
2223
}
2324

24-
const truncateText = function (el, bindings, useFallbackFunc) {
25+
const truncateText = function(el, bindings, useFallbackFunc) {
2526
let lines = parseInt(bindings.value);
2627
if (isNaN(lines)) {
27-
console.error('Parameter for vue-line-clamp must be a number');
28-
return
29-
}
30-
else if (lines !== el[currentValueProp]) {
28+
console.error("Parameter for vue-line-clamp must be a number");
29+
return;
30+
} else if (lines !== el[currentValueProp]) {
3131
el[currentValueProp] = lines;
3232

3333
if (useFallbackFunc) {
3434
useFallbackFunc(el, bindings, lines);
35-
}
36-
else {
37-
el.style.webkitLineClamp = lines ? lines : '';
35+
} else {
36+
el.style.webkitLineClamp = lines ? lines : "";
3837
}
3938
}
4039
};
4140

4241
const VueLineClamp = {
43-
install (Vue, options) {
44-
options = Object.assign({
45-
importCss: false
46-
}, options);
42+
install(Vue, options) {
43+
options = Object.assign(
44+
{ importCss: false, textOverflow: "ellipsis" },
45+
options
46+
);
47+
const styles =
48+
"display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:" +
49+
options.textOverflow;
4750

4851
if (options.importCss) {
4952
const stylesheets = window.document.styleSheets,
50-
rule = `.vue-line-clamp{${css}}`;
53+
rule = `.vue-line-clamp{${styles}}`;
5154
if (stylesheets && stylesheets[0] && stylesheets.insertRule) {
5255
stylesheets.insertRule(rule);
5356
} else {
54-
let link = window.document.createElement('style');
55-
link.id = 'vue-line-clamp';
57+
let link = window.document.createElement("style");
58+
link.id = "vue-line-clamp";
5659
link.appendChild(window.document.createTextNode(rule));
5760
window.document.head.appendChild(link);
5861
}
5962
}
6063

6164
const useFallbackFunc =
62-
"webkitLineClamp" in document.body.style
65+
"webkitLineClamp" in document.body.style
6366
? undefined
6467
: options.fallbackFunc || defaultFallbackFunc;
6568

66-
Vue.directive('line-clamp', {
69+
Vue.directive("line-clamp", {
6770
currentValue: 0,
68-
bind (el) {
71+
bind(el) {
6972
if (!options.importCss) {
70-
el.style.cssText += css;
73+
el.style.cssText += styles;
74+
} else {
75+
el.classList.add("vue-line-clamp");
7176
}
72-
else {
73-
el.classList.add('vue-line-clamp');
74-
}
75-
7677
},
7778
inserted: (el, bindings) => truncateText(el, bindings, useFallbackFunc),
7879
updated: (el, bindings) => truncateText(el, bindings, useFallbackFunc),
79-
componentUpdated: (el, bindings) => truncateText(el, bindings, useFallbackFunc)
80+
componentUpdated: (el, bindings) =>
81+
truncateText(el, bindings, useFallbackFunc)
8082
});
8183
}
8284
};

‎dist/vue-line-clamp.esm.js‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,82 @@
1-
const css = 'display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis';
21
const currentValueProp = "vLineClampValue";
32

43
function defaultFallbackFunc(el, bindings, lines) {
5-
if(lines){
4+
if (lines) {
65
let lineHeight = parseInt(bindings.arg);
76
if (isNaN(lineHeight)) {
8-
console.warn('line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px');
7+
console.warn(
8+
"line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px"
9+
);
910
lineHeight = 16;
1011
}
1112

1213
let maxHeight = lineHeight * lines;
1314

14-
el.style.maxHeight = maxHeight ? maxHeight+'px' : '';
15-
el.style.overflowX = 'hidden';
16-
el.style.lineHeight = lineHeight+'px'; // to ensure consistency
15+
el.style.maxHeight = maxHeight ? maxHeight + "px" : "";
16+
el.style.overflowX = "hidden";
17+
el.style.lineHeight = lineHeight + "px"; // to ensure consistency
1718
} else {
18-
el.style.maxHeight = el.style.overflowX = '';
19+
el.style.maxHeight = el.style.overflowX = "";
1920
}
2021
}
2122

22-
const truncateText = function (el, bindings, useFallbackFunc) {
23+
const truncateText = function(el, bindings, useFallbackFunc) {
2324
let lines = parseInt(bindings.value);
2425
if (isNaN(lines)) {
25-
console.error('Parameter for vue-line-clamp must be a number');
26-
return
27-
}
28-
else if (lines !== el[currentValueProp]) {
26+
console.error("Parameter for vue-line-clamp must be a number");
27+
return;
28+
} else if (lines !== el[currentValueProp]) {
2929
el[currentValueProp] = lines;
3030

3131
if (useFallbackFunc) {
3232
useFallbackFunc(el, bindings, lines);
33-
}
34-
else {
35-
el.style.webkitLineClamp = lines ? lines : '';
33+
} else {
34+
el.style.webkitLineClamp = lines ? lines : "";
3635
}
3736
}
3837
};
3938

4039
const VueLineClamp = {
41-
install (Vue, options) {
42-
options = Object.assign({
43-
importCss: false
44-
}, options);
40+
install(Vue, options) {
41+
options = Object.assign(
42+
{ importCss: false, textOverflow: "ellipsis" },
43+
options
44+
);
45+
const styles =
46+
"display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:" +
47+
options.textOverflow;
4548

4649
if (options.importCss) {
4750
const stylesheets = window.document.styleSheets,
48-
rule = `.vue-line-clamp{${css}}`;
51+
rule = `.vue-line-clamp{${styles}}`;
4952
if (stylesheets && stylesheets[0] && stylesheets.insertRule) {
5053
stylesheets.insertRule(rule);
5154
} else {
52-
let link = window.document.createElement('style');
53-
link.id = 'vue-line-clamp';
55+
let link = window.document.createElement("style");
56+
link.id = "vue-line-clamp";
5457
link.appendChild(window.document.createTextNode(rule));
5558
window.document.head.appendChild(link);
5659
}
5760
}
5861

5962
const useFallbackFunc =
60-
"webkitLineClamp" in document.body.style
63+
"webkitLineClamp" in document.body.style
6164
? undefined
6265
: options.fallbackFunc || defaultFallbackFunc;
6366

64-
Vue.directive('line-clamp', {
67+
Vue.directive("line-clamp", {
6568
currentValue: 0,
66-
bind (el) {
69+
bind(el) {
6770
if (!options.importCss) {
68-
el.style.cssText += css;
71+
el.style.cssText += styles;
72+
} else {
73+
el.classList.add("vue-line-clamp");
6974
}
70-
else {
71-
el.classList.add('vue-line-clamp');
72-
}
73-
7475
},
7576
inserted: (el, bindings) => truncateText(el, bindings, useFallbackFunc),
7677
updated: (el, bindings) => truncateText(el, bindings, useFallbackFunc),
77-
componentUpdated: (el, bindings) => truncateText(el, bindings, useFallbackFunc)
78+
componentUpdated: (el, bindings) =>
79+
truncateText(el, bindings, useFallbackFunc)
7880
});
7981
}
8082
};

0 commit comments

Comments
 (0)