upend/ui/src/components/utils/Ellipsis.svelte

<script lang="ts">
  import { tick } from "svelte";

  export let value: string;
  let root: HTMLDivElement;

  $: valueStart = value.substring(0, value.length - 7).replace(" ", "\xa0");
  $: valueEnd = value
    .substring(value.length - 7, value.length)
    .replace(" ", "\xa0");
</script>

<div class="ellipsis" bind:this={root}>
  <div class="start">{valueStart}</div>
  <div class="end">{valueEnd}</div>
</div>

<style lang="scss">
  .ellipsis {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;

    * {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      min-width: 0;
    }

    .start {
      flex: 0 1 auto;
      text-overflow: ellipsis;
    }

    .end {
      flex: 1 0 auto;
      white-space: nowrap;
    }
  }
</style>