文章/答案/技术大牛

发布

社区首页 >问答首页 >css字换行，对齐右对齐

问css字换行，对齐右对齐
EN

Stack Overflow用户

提问于 2022-09-09 03:05:17

回答 1查看 66关注 0票数 0

我有一个很长的段落在一个div，类似的歌词在一首歌。歌曲/div中的每一行都有一个BR标记，强制生成一条新行。

然而，如果这条线没有足够的空间来容纳所有的一条线，它将被包装到下一行。一切都很好。

我希望所有文本都保持对齐，除了放置在下一行的包装单词/标记外，这些单词/标记应该对齐。

当然，单词包装是自动的，所以我不能手动地将单词放在新的div上，而只是正确地对齐特定的div。

编辑:我尝试过text-align-last: right，有些浏览器(Epiphany)不支持这个属性，但是在支持它的火狐中，它没有适当的效果，因为如果整行不需要包装，那么它是对齐的，因为在这些情况下，text-align-last超过了标准的text-align。

有什么想法吗？

html

css

right-align

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-09 03:41:45

我对text-align-last有个想法

首先，您必须使用javascript (或任何时候)来修改您的段落，因此每个句子都应该由div (或p)包装。

让我们假设这里是您最初的段落：

<div>
    I need somebody who can love me at my worst <br>
    No, I'm not perfect, but I hope you see my worth
</div>

我们可以将 替换为 ，然后在顶部添加，在底部添加，如下所示：

<div>
    <p>I need somebody who can love me at my worst </p><br>
    <p>No, I'm not perfect, but I hope you see my worth</p>
</div>

接下来，我们为p添加样式text-align-last: right，并设置display: inline-block使其左对齐，从而避免了前面提到的重写第一行的问题。其结果将是：

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73656929

复制

相似问题

问css字换行，对齐右对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css字换行，对齐右对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css字换行，对齐右对齐
EN