JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mx-4">
                            <VIcon>mdi-web</VIcon>
                        </div>
                        <div>
                            <span class="field-text">
                                <a class="website">
                                    {{ user.website | formatDomainFilter }}
                                </a>
                                <span v-else>N/A</span>
                            </span>
                            <span class="field-hint">Website</span>
                        </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Neucha', cursive;
}

.website {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background: #eee;
}