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

<script lang="ts">
  export let value: string;
  let root: HTMLDivElement;

  $: valueStart = value.substring(0, value.length - 7);
  $: 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(" ", "&nbsp;"))
    );
  }
</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>