fix whitespace ellipsis bug
parent
015b6926b8
commit
183914f351
|
@ -1,11 +1,22 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export let value: string;
|
export let value: string;
|
||||||
|
let root: HTMLDivElement;
|
||||||
|
|
||||||
$: valueStart = value.substring(0, value.length - 7);
|
$: valueStart = value.substring(0, value.length - 7);
|
||||||
$: valueEnd = value.substring(value.length - 7, value.length);
|
$: valueEnd = value.substring(value.length - 7, value.length);
|
||||||
|
|
||||||
|
// If the break happens to be on a space, it gets collapsed; `white-space` CSS
|
||||||
|
// property doesn't help, and replacing the spaces in the strings gets escaped
|
||||||
|
// by Svelte; hence, direct manipulation of the DOM.
|
||||||
|
$: {
|
||||||
|
value;
|
||||||
|
Array.from(root?.children || []).forEach(
|
||||||
|
(el) => (el.innerHTML = el.innerHTML.replace(" ", " "))
|
||||||
|
);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="ellipsis">
|
<div class="ellipsis" bind:this={root}>
|
||||||
<div class="start">{valueStart}</div>
|
<div class="start">{valueStart}</div>
|
||||||
<div class="end">{valueEnd}</div>
|
<div class="end">{valueEnd}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue