v-html 右边文字靠边

### 如何在 Vue.js 中使用 `v-html` 实现文本右对齐

为了使通过 `v-html` 渲染的富文本内容实现右对齐，在定义样式时可以采用内联样式或是外部 CSS 类的方式。当遇到富文本对齐组件样式失效的情况，通常是因为内部 HTML 结构覆盖了外层设置的样式[^3]。

#### 方法一：利用内联样式
可以直接给包含 `v-html` 的标签添加内联样式属性来进行控制：

<div v-html="login_protocol" style="text-align:right;"></div>

这种方法简单直接，适用于简单的场景下快速调整样式。

#### 方法二：创建自定义类并应用到容器上
更推荐的做法是预先定义好 CSS 类名，并将其应用于包裹 `v-html` 的元素中：

.right-aligned {
    text-align: right;
}

<div class="right-aligned" v-html="login_protocol"></div>

这种方式不仅保持了HTML结构清晰整洁，而且便于维护和重用相同的样式规则。

如果发现即使设置了上述样式仍然无法生效，则可能是由于被嵌入的内容本身带有更强的选择器权重所导致。此时可以通过增加样式的优先级来解决这个问题，比如使用 `!important` 关键字强制指定样式效果：

.right-aligned {
    text-align: right !important;
}

需要注意的是过度依赖 `!important` 可能会降低代码可读性和灵活性，因此应当谨慎使用[^1]。