Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove Internet Explorer 11 specific logic from KTextTruncator #651

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 1 addition & 95 deletions lib/KTextTruncator.vue
Original file line number Diff line number Diff line change
@@ -1,19 +1,4 @@
<template>

<!--
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's fine to cleanup comments that are specific to IE11, but please make sure to read them carefully and do not remove comments that have nothing to do with IE11 logic. This applies to all other removed comments in this file.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's Good Catch!

Text is wrapped in two `spans`s to allow parent components adding
padding style directly on `<TextTruncatorCss>` component no matter
of what truncating technique is used. Otherwise adding padding directly
would break when using technique (B) since text that should be truncated
would show in padding area.

Attributes are inherited by the inner `span` to emulate the same behavior
like if only one element would wrap the text to allow attributes be applied
as close as possible to the text element.

Some width information need to be provided to `<span>s` to allow `text-overflow`
calculate properly when ellipsis should be added.
-->
<span :style="{ display: 'inline-block', maxWidth: '100%' }">
<span
v-bind="$attrs"
@@ -23,61 +8,30 @@
{{ text }}
</span>
</span>

</template>


<script>

/**
* Truncates text to a certain number of lines
* and adds an ellipsis character "…"
*
* Internet Explorer note:
* Depending on length of words of the text, there might
* be a gap between the last visible word and "…"
*/
export default {
name: 'KTextTruncator',
inheritAttrs: false,
props: {
/**
* Text to be truncated
*/
text: {
type: String,
required: true,
},
/**
* Maximum number of lines to be shown
*/
maxLines: {
type: Number,
required: false,
default: 1,
},
/**
* Text line height in rem.
* Used only for Internet Explorer fallback.
*/
lineHeightIE: {
type: Number,
required: false,
default: 1.4,
},
},
computed: {
truncate() {

Check failure on line 29 in lib/KTextTruncator.vue

GitHub Actions / lint

Expected to return a value in "truncate" computed property
const nuxtServerSideRendering = process && process.server;
if (nuxtServerSideRendering) {
return;
}

/*
(A)
For one line, use standard ellipsis text overflow
that works well for such scenario
*/
if (this.maxLines === 1) {
return {
overflow: 'hidden',
@@ -86,64 +40,16 @@
};
}

// 54 is random number only to be able to define `supports` test condition
if ('CSS' in window && CSS.supports && CSS.supports('-webkit-line-clamp: 54')) {
/*
(B)
For multiple lines, use line clamp in browsers that support it
(https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)
*/
return {
overflow: 'hidden',
display: '-webkit-box',
'-webkit-line-clamp': `${this.maxLines}`,
'-webkit-box-orient': 'vertical',
// needed to make line clamp work for very long word with no spaces
overflowWrap: 'break-word',
};
} else {
/*
(C)
Fallback for multiple lines in Internet Explorer and some older versions
of other browsers that don't support line clamp
(https://caniuse.com/mdn-css_properties_-webkit-line-clamp).
Calculate max height and add "..." in `::before` while covering it with
white rectangle defined in `::after` when text doesn't need to be truncated.
Adapted from https://hackingui.com/a-pure-css-solution-for-multiline-text-truncation/
and https://css-tricks.com/line-clampin/#the-hide-overflow-place-ellipsis-pure-css-way.
*/
const ellipsisWidth = '1rem';
return {
overflow: 'hidden',
position: 'relative',
lineHeight: `${this.lineHeightIE}rem`,
maxHeight: `${this.maxLines * this.lineHeightIE}rem`,
// needed to make truncation work for very long word with no spaces
// `word-wrap` is a legacy name for `overflow-wrap` that needs to be used for IE
wordWrap: 'break-word',
// create space for "..."
paddingRight: ellipsisWidth,
marginRigth: `-${ellipsisWidth}`,
'::before': {
content: "'…'",
position: 'absolute',
right: 0,
bottom: 0,
},
// cover "..." with white rectangle when text
// doesn't need to be truncated
'::after': {
content: "''",
position: 'absolute',
right: 0,
width: ellipsisWidth,
height: '100%',
background: this.$themeTokens.surface,
},
};
}
},
},
};

</script>
</script>