diff --git a/frontend/src/components/AppNodeText.vue b/frontend/src/components/AppNodeText.vue
index b6bb1c381..3ce939fec 100644
--- a/frontend/src/components/AppNodeText.vue
+++ b/frontend/src/components/AppNodeText.vue
@@ -4,28 +4,16 @@
   Selectively renders the following tags in HTML and SVG:
     - <sup>
     - <i>
-    - <a> with an `href` attribute surrounded in double quotes
-
-  There are two alternatives to the approach taken here, but neither are
-  sufficient.
-
-  1. We could use a sanitizer like [DOMPurify](https://github.com/cure53/DOMPurify)
-     to sanitize arbitrary strings, but that would strip out legitimate text
-     that an HTML parser might confuse for a tag. An example of such text can be
-     found here: <https://github.com/monarch-initiative/monarch-app/issues/887#issuecomment-2479676335>
-
-  2. We could escape the entire string, selectively unescape `&lt;sup&gt;` (and
-     so on), and then pass the string to `containerEl.innerHTML`. However, this
-     would lead to markup without the desired effect in SVG, since the <sup> and
-     <i> elements do not do anything in SVG.
-
+    - <b>
+    - <a> with an `href` attribute starting with `http`, surrounded in double quotes
 -->
 
 <template>
-  <tspan v-if="isSvg" ref="container">
-    {{ text }}
-  </tspan>
-
+  <foreignObject v-if="isSvg" x="0" y="0" width="100%" height="1.5em">
+    <span ref="container" xmlns="http://www.w3.org/1999/xhtml">
+      {{ text }}
+    </span>
+  </foreignObject>
   <span
     v-else
     ref="container"
@@ -41,193 +29,86 @@ import { onMounted, onUpdated, ref } from "vue";
 type Props = {
   text?: string;
   isSvg?: boolean;
+  truncateWidth?: number;
   highlight?: boolean;
 };
 const props = withDefaults(defineProps<Props>(), {
   text: "",
   isSvg: false,
+  truncateWidth: undefined,
   highlight: false,
 });
 
-const container = ref<HTMLSpanElement | SVGTSpanElement | null>(null);
+const container = ref<HTMLSpanElement | null>(null);
 
 // Use $attrs to capture external classes and styles
 
-type ReplacedTag = "sup" | "a" | "i" | "b";
-
-type Replacement = {
-  type: ReplacedTag;
-  start: [number, number];
-  end: [number, number];
-  startNode?: Text;
-  endNode?: Text;
-};
-
-type ReplacementPosition = {
-  type: "start" | "end";
-  replacement: Replacement;
-  at: [number, number];
-};
-
-const replacementTags = new Map([
-  [
-    "sup" as ReplacedTag,
-    {
-      regex: /(<sup>).*?(<\/sup>)/dg,
-      createSurroundingEl(isSvg: Boolean) {
-        return isSvg
-          ? document.createElementNS("http://www.w3.org/2000/svg", "tspan")
-          : document.createElement("sup");
-      },
-      afterMount(isSvg: Boolean, el: Element) {
-        if (!isSvg) return;
-        el.setAttribute("dy", "-1ex");
-        el.classList.add("svg-superscript");
-
-        // The next sibling will be the text node "</sup>". Check if there is
-        // remaining text after that. If there is, adjust the text baseline back
-        // down to the normal level.
-        const nextSibling = el.nextSibling!.nextSibling;
-        if (!nextSibling) return;
-
-        const range = new Range();
-        range.selectNode(nextSibling);
-
-        const tspan = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "tspan",
-        );
-
-        tspan.setAttribute("dy", "+1ex");
+function makeEscapedTagPattern(tagName: string, attrsPattern: string = "") {
+  return new RegExp(
+    `(&lt;${tagName}${attrsPattern}&gt;)(.*?)(&lt;/${tagName}&gt;)`,
+    "g",
+  );
+}
 
-        range.surroundContents(tspan);
-      },
-    },
-  ],
-  [
-    "i" as ReplacedTag,
-    {
-      regex: /(<i>).*?(<\/i>)/dg,
-      createSurroundingEl(isSvg: Boolean) {
-        return isSvg
-          ? document.createElementNS("http://www.w3.org/2000/svg", "tspan")
-          : document.createElement("i");
-      },
-      afterMount(isSvg: Boolean, el: Element) {
-        if (!isSvg) return;
-        el.classList.add("svg-italic");
-      },
-    },
-  ],
-  [
-    "a" as ReplacedTag,
-    {
-      regex: /(<a href="http[^"]+">).*?(<\/a>)/dg,
-      createSurroundingEl(isSvg: Boolean) {
-        return isSvg
-          ? document.createElementNS("http://www.w3.org/2000/svg", "a")
-          : document.createElement("a");
+const replacementPatterns = [
+  makeEscapedTagPattern("sup"),
+  makeEscapedTagPattern("i"),
+  makeEscapedTagPattern("b"),
+  makeEscapedTagPattern("a", ' href="http[^"]+"'),
+];
+
+function buildDOM(containerEl: HTMLSpanElement) {
+  const { truncateWidth, isSvg } = props;
+
+  let html = containerEl.innerHTML;
+
+  replacementPatterns.forEach((pattern) => {
+    html = html.replaceAll(
+      pattern,
+      (match, openTag: string, content: string, closeTag: string) => {
+        // Replace &lt; with < and &gt; with > to unescape them
+        let unescaped = "";
+        unescaped += "<" + openTag.slice(4, -4) + ">";
+        unescaped += content;
+        unescaped += "<" + closeTag.slice(4, -4) + ">";
+        return unescaped;
       },
-      afterMount(isSvg: Boolean, el: Element) {
-        // The previous sibling will be the text node containing the string
-        // <a href="http...">. Slice it to get the value of the href.
-        const tagTextNode = el.previousSibling!;
-        const href = tagTextNode.textContent!.slice(9, -2);
-        el.setAttribute("href", href);
-      },
-    },
-  ],
-  [
-    "b" as ReplacedTag,
-    {
-      regex: /(<b>).*?(<\/b>)/dg,
-      createSurroundingEl(isSvg: Boolean) {
-        return isSvg
-          ? document.createElementNS("http://www.w3.org/2000/svg", "tspan")
-          : document.createElement("b");
-      },
-      afterMount(isSvg: Boolean, el: Element) {
-        if (!isSvg) return;
-        el.classList.add("svg-bold");
-      },
-    },
-  ],
-]);
-
-function buildDOM(containerEl: Element) {
-  const text = props.text;
-
-  const containsOnlyText =
-    containerEl.childNodes.length === 1 &&
-    containerEl.firstChild?.nodeType === Node.TEXT_NODE &&
-    text !== null;
-
-  // This should always be false, but just in case-- bail out of the function
-  // if the element contains anything but a single text node.
-  if (!containsOnlyText) return;
-
-  const textNode = containerEl.firstChild as Text;
-
-  const replacements: Replacement[] = [];
-
-  // Create a list of every place there's a match for a start and end tag
-  // matched from the defined regexes.
-  Array.from(replacementTags.entries()).forEach(([type, { regex }]) => {
-    for (const match of text.matchAll(regex)) {
-      const { indices } = match;
-
-      replacements.push({
-        type,
-        start: indices![1],
-        end: indices![2],
-      });
-    }
+    );
   });
 
-  // Now create a new list that has the position of each start and end token
-  const positions: ReplacementPosition[] = replacements.flatMap((x) => [
-    { type: "start", replacement: x, at: x.start },
-    { type: "end", replacement: x, at: x.end },
-  ]);
+  containerEl.innerHTML = html;
 
-  // Sort that list by the position of the tag token (with the last token
-  // first and the first token last).
+  // WebKit browsers have strange behavior rendering <sup> tags inside
+  // <foreignObject> tags. It seems to be because they use relative
+  // positioning to style superscripts, and relative positioning inside
+  // <foreignObject> tags doesn't work very well (in WebKit). As a result, the
+  // superscripted text shows up at the very top of the SVG, as if it were
+  // relatively positioned there.
   //
-  // After that, iterate through each of the token positions and split the
-  // text node at the token's boundaries. Store the text node of each start
-  // and end tag in the `replacements` array to be used later.
-  positions
-    .sort((a, b) => {
-      return b.at[0] - a.at[0];
-    })
-    .forEach((position) => {
-      textNode.splitText(position.at[1]);
-      const node = textNode.splitText(position.at[0]);
-      position.replacement[`${position.type}Node`] = node;
+  // To avoid this, we can change the <sup> tags to <span>s and style them
+  // ourselves without using relative positioning.
+  if (isSvg) {
+    const supTags = [...containerEl.querySelectorAll("sup")];
+
+    supTags.forEach((supTag) => {
+      const spanTag = document.createElement("span");
+      spanTag.style.verticalAlign = "super";
+      spanTag.style.fontSize = "80%";
+      spanTag.style.lineHeight = "1.0";
+
+      spanTag.replaceChildren(...supTag.childNodes);
+      supTag.parentNode!.replaceChild(spanTag, supTag);
     });
-
-  // Build the correct DOM tree for each replacement found
-  replacements.forEach((replacement) => {
-    const { startNode, endNode, type } = replacement;
-    const { createSurroundingEl, afterMount } = replacementTags.get(type)!;
-
-    // Select the range that goes from the end of the opening tag text node to
-    // the start of the closing tag text node.
-    const range = new Range();
-    range.setStartAfter(startNode!);
-    range.setEndBefore(endNode!);
-
-    // Surround that range with the appropriate DOM element.
-    const el = createSurroundingEl(props.isSvg);
-    range.surroundContents(el);
-
-    // Run any code required after the container element is mounted.
-    afterMount(props.isSvg, el);
-
-    // Remove the start and end tag text nodes
-    startNode!.parentNode!.removeChild(startNode!);
-    endNode!.parentNode!.removeChild(endNode!);
-  });
+  }
+
+  if (truncateWidth) {
+    containerEl.style.display = "inline-block";
+    containerEl.style.overflow = "hidden";
+    containerEl.style.whiteSpace = "nowrap";
+    containerEl.style.textOverflow = "ellipsis";
+    containerEl.style.verticalAlign = "top";
+    containerEl.style.maxWidth = `${truncateWidth}px`;
+  }
 }
 
 onMounted(() => {
@@ -242,15 +123,6 @@ onUpdated(() => {
 </script>
 
 <style>
-.svg-superscript {
-  font-size: 0.7rem;
-}
-.svg-italic {
-  font-style: italic;
-}
-.svg-bold {
-  font-weight: bold;
-}
 .highlight-text em {
   background-color: yellow;
 }
diff --git a/frontend/src/components/ThePhenogrid.vue b/frontend/src/components/ThePhenogrid.vue
index 98e25da62..f92e5dc4f 100644
--- a/frontend/src/components/ThePhenogrid.vue
+++ b/frontend/src/components/ThePhenogrid.vue
@@ -79,7 +79,11 @@
                 cellSize * 0.25
               }) rotate(-45)`"
             >
-              {{ truncateLabels ? truncate(col.label) : col.label }}
+              <AppNodeText
+                is-svg
+                :text="col.label"
+                :truncate-width="marginLeft * 0.8"
+              />
             </text>
             <template #content>
               <AppNodeBadge :node="col" :absolute="true" :show-id="true" />
@@ -116,7 +120,11 @@
                 (0.5 + rowIndex) * cellSize
               })`"
             >
-              {{ truncateLabels ? truncate(row.label) : row.label }}
+              <AppNodeText
+                is-svg
+                :text="row.label"
+                :truncate-width="marginLeft * 0.8"
+              />
             </text>
             <template #content>
               <AppNodeBadge :node="row" :absolute="true" :show-id="true" />
@@ -364,10 +372,11 @@ import { useResizeObserver, useScroll } from "@vueuse/core";
 import type { TermInfo, TermPairwiseSimilarity } from "@/api/model";
 import AppCheckbox from "@/components/AppCheckbox.vue";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
+import AppNodeText from "@/components/AppNodeText.vue";
 import AppSelectSingle, { type Option } from "@/components/AppSelectSingle.vue";
 import { appendToBody } from "@/global/tooltip";
 import { frame } from "@/util/debug";
-import { screenToSvgCoords, truncateBySize } from "@/util/dom";
+import { screenToSvgCoords } from "@/util/dom";
 import { downloadSvg } from "@/util/download";
 import { copyToClipboard } from "@/util/string";
 import type AppFlex from "./AppFlex.vue";
@@ -491,15 +500,6 @@ function copy() {
   );
 }
 
-/** truncate labels */
-function truncate(text?: string) {
-  return truncateBySize(
-    text || "",
-    marginLeft * 0.9,
-    cellSize * 0.5 + "px Poppins",
-  );
-}
-
 /** track grid scroll */
 const scrollInfo = useScroll(scroll);
 const scrollCoords = ref({ x: 0, y: 0, w: 0, h: 0 });
diff --git a/frontend/src/pages/PageTestbed.vue b/frontend/src/pages/PageTestbed.vue
index 1084c9346..cca807304 100644
--- a/frontend/src/pages/PageTestbed.vue
+++ b/frontend/src/pages/PageTestbed.vue
@@ -159,6 +159,61 @@
     {{ tab }}
   </AppSection>
 
+  <!-- node text component -->
+  <AppSection>
+    <AppHeading>Labels with markup and truncation</AppHeading>
+
+    <div id="labels-grid">
+      <div>
+        <AppHeading :level="3">HTML</AppHeading>
+        <AppFlex direction="col" gap="none">
+          <div v-for="(text, index) of nodeText" :key="index">
+            <AppNodeText :text="text.value" />
+          </div>
+        </AppFlex>
+      </div>
+
+      <div>
+        <AppHeading :level="3">HTML (truncated)</AppHeading>
+        <AppFlex direction="col" gap="none">
+          <div v-for="(text, index) of nodeText" :key="index">
+            <AppNodeText :text="text.value" :truncate-width="text.truncate" />
+          </div>
+        </AppFlex>
+      </div>
+
+      <div>
+        <AppHeading :level="3">SVG</AppHeading>
+        <svg :height="nodeText.length * 24">
+          <g
+            v-for="(text, index) of nodeText"
+            :key="index"
+            :transform="`translate(0, ${24 * index})`"
+          >
+            <AppNodeText :text="text.value" is-svg />
+          </g>
+        </svg>
+      </div>
+
+      <div>
+        <AppHeading :level="3">SVG (truncated)</AppHeading>
+        <svg :height="nodeText.length * 24">
+          <g
+            v-for="(text, index) of nodeText"
+            :key="index"
+            :transform="`translate(0, ${24 * index})`"
+          >
+            <AppNodeText
+              :text="text.value"
+              :truncate-width="text.truncate"
+              is-svg
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  </AppSection>
+
   <!-- status component -->
   <AppSection>
     <AppHeading>Status</AppHeading>
@@ -198,6 +253,7 @@ import { omit } from "lodash";
 import { useEventListener } from "@vueuse/core";
 import AppButton from "@/components/AppButton.vue";
 import AppInput from "@/components/AppInput.vue";
+import AppNodeText from "@/components/AppNodeText.vue";
 import AppPercentage from "@/components/AppPercentage.vue";
 import AppSelectAutocomplete from "@/components/AppSelectAutocomplete.vue";
 import AppSelectMulti from "@/components/AppSelectMulti.vue";
@@ -401,6 +457,19 @@ const tabs = [
 /** selected tab */
 const tab = ref(tabs[0].id);
 
+/** node text */
+const nodeText = [
+  { value: "Plain text", truncate: 50 },
+  { value: "Text which has been <b>bolded</b>", truncate: 200 },
+  { value: "Text which has been <i>italicized</i>", truncate: 200 },
+  { value: "Text which has been <sup>superscripted</sup>", truncate: 200 },
+  { value: "Text with <s>tags that are not whitelisted</s>", truncate: 200 },
+  {
+    value: 'Text with a <a href="https://example.com/">link in it</a>',
+    truncate: 120,
+  },
+];
+
 /** table input props */
 const table = ref({
   cols: [
@@ -462,4 +531,14 @@ iframe {
   color: $theme;
   font-size: 4rem;
 }
+
+#labels-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+}
+
+#labels-grid h3 {
+  margin-bottom: 0;
+}
 </style>
diff --git a/frontend/unit/AppNodeText.test.ts b/frontend/unit/AppNodeText.test.ts
new file mode 100644
index 000000000..c20c790f8
--- /dev/null
+++ b/frontend/unit/AppNodeText.test.ts
@@ -0,0 +1,77 @@
+import { expect, test } from "vitest";
+import AppNodeText from "@/components/AppNodeText.vue";
+import { mount } from "./setup";
+
+test("Renders plain text", async () => {
+  const props = { text: "Node name" };
+
+  const htmlEl = mount(AppNodeText, { props });
+  expect(htmlEl.get("span").text()).toEqual("Node name");
+});
+
+test("Renders bolded text", async () => {
+  const props = { text: "Node <b>name</b>" };
+
+  const htmlEl = mount(AppNodeText, { props });
+  expect(htmlEl.get("span").text()).toEqual("Node name");
+  expect(htmlEl.get("span b").text()).toEqual("name");
+});
+
+test("Renders italicized text", async () => {
+  const props = { text: "Node <i>name</i>" };
+
+  const htmlEl = mount(AppNodeText, { props });
+  expect(htmlEl.get("span").text()).toEqual("Node name");
+  expect(htmlEl.get("span i").text()).toEqual("name");
+});
+
+test("Renders anchor tags with an href", async () => {
+  const props = { text: 'Node <a href="https://example.com/">name</a>' };
+
+  const htmlEl = mount(AppNodeText, { props });
+  expect(htmlEl.get("span").text()).toEqual("Node name");
+  expect(htmlEl.get("span a").text()).toEqual("name");
+  expect(htmlEl.get("span a").attributes("href")).toEqual(
+    "https://example.com/",
+  );
+});
+
+test("Renders superscripted text", async () => {
+  const props = { text: "Node <sup>name</sup>" };
+
+  const htmlEl = mount(AppNodeText, { props });
+  expect(htmlEl.get("span").text()).toEqual("Node name");
+  expect(htmlEl.get("span sup").text()).toEqual("name");
+});
+
+test("Renders superscripted as a span in SVG", async () => {
+  const props = { text: "Node <sup>name</sup>", isSvg: true };
+
+  const htmlEl = mount(AppNodeText, { props });
+  expect(htmlEl.get("span").text()).toEqual("Node name");
+  expect(htmlEl.get("span span").text()).toEqual("name");
+});
+
+// FIXME: This fails on non-SVG text because the HTML <span> element in
+// AppNodeText.vue takes `v-html` rather than `v-text`. This was done to
+// support highlighting in a0f2eefb75b79def58940a652f4fdf7a23c8c931.
+test("Escapes non-whitelisted 'tags'", async () => {
+  const props = { text: "Node <test>name</test>", isSvg: true };
+
+  const htmlEl = mount(AppNodeText, { props });
+  expect(htmlEl.get("span").text()).toEqual("Node <test>name</test>");
+});
+
+test("Renders nested tags", async () => {
+  const props = { text: "Node <b>n<sup>am</sup>e</b>" };
+
+  const htmlEl = mount(AppNodeText, { props });
+  expect(htmlEl.get("span").text()).toEqual("Node name");
+});
+
+test("Renders SVG in a foreignObject tag", async () => {
+  const props = { text: "Node name", isSvg: true };
+
+  const svgEl = mount(AppNodeText, { props });
+  expect(svgEl.get("foreignobject").text()).toEqual("Node name");
+});