使用v-html渲染长文本时，如何让Read more按钮与文本末尾同排显示

你之前设置display: inline不生效，本质是踩了两个常见的渲染坑：

• 原本写在v-html外面的<a>按钮和承载HTML的<div>是兄弟节点，<div>作为块级元素默认占满父容器的整行宽度，哪怕手动把div设为inline，只要渲染的HTML内部自带<p>、<div>这类原生块级标签，块级标签会强制触发布局换行，按钮根本没法精准贴到文本末尾
• 块级元素的布局流是从上到下的，行内元素才能和前后的文本在同一行排版，你单独给div设inline，没有把整个内容流调整成行内排版的上下文，自然会出现布局错位

方案1：把Read more按钮直接拼入待渲染的HTML字符串 #

这是能保证按钮100%跟在文本末尾最稳妥的方法，完全不需要改外层布局：

<template>
  <div v-html="renderTargetContent"></div>
</template>

<script setup>
import { ref, computed } from 'vue'
// 你原本存储的带内嵌标签的长文本
const rawHtmlContent = ref('<p>这里是一大段需要渲染的长文本，包含各种内嵌HTML标签</p>')
const showFullContent = ref(false)

const renderTargetContent = computed(() => {
  // 未展示全量内容时，直接把按钮的HTML拼到原内容最后面
  const readMoreHtml = showFullContent.value 
    ? '' 
    : '<a href="javascript:;" @click="showFullContent = true" class="read-more-link">Read more</a>'
  return rawHtmlContent.value + readMoreHtml
})
</script>

• 优势：按钮和文本完全处在同一个DOM渲染流里，不管原HTML里有多少块级标签，按钮都会精准出现在所有内容的最后位置，不会出现排版偏移
• 注意点：这种写法完全兼容Vue的事件绑定，不需要额外处理HTML字符串里的事件解析问题

方案2：调整排版上下文，把兄弟节点的按钮放到同一行 #

如果你不想改动原HTML字符串，就把原来承载v-html的块级div换成行内元素，让按钮和内容处于同一个行内排版流里：

<template>
  <div class="text-container">
    <!-- 把原来的<div v-html>换成<span>，天然是行内元素，不会强制占满整行 -->
    <span v-html="someVariableContainingHtml" class="inline-html-box"></span>
    <a @click="makeMoreTextVisible" class="read-more-btn">Read more</a>
  </div>
</template>

<style>
.text-container {
  /* 开启行内布局，避免内容强制换行 */
  display: inline;
  line-height: 1.6;
}
.read-more-btn {
  margin-left: 6px;
  /* 禁止按钮自身换行，保证按钮完整显示在一行 */
  white-space: nowrap;
  color: #165dff;
  cursor: pointer;
}
</style>

• 适配场景：当你的原HTML内容大部分是行内文本（比如加粗、链接这类内嵌标签）时，按钮会自然衔接到行尾
• 兜底效果：如果原HTML末尾是块级标签，按钮会自动跟在块级内容结束的位置，不会出现内容和按钮脱节的问题

方案3：截断场景的专用处理 #

如果你的需求是“内容超过指定高度就截断，末尾显示Read more按钮”，可以结合CSS的行截断能力，把按钮锚定在截断文本的右下角，完全不需要修改DOM结构：

.inline-html-box {
  position: relative;
  /* 最多显示3行文本，超出就截断 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.read-more-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  /* 给按钮加渐变过渡，让它看起来和截断的文本自然衔接 */
  background: linear-gradient(90deg, transparent, #ffffff 35%);
  padding-left: 2.5rem;
}

内容的提问来源于stack exchange，提问作者Skywalker