html - 多行对齐和段落背景

Question

我无法混合渲染文本的两个要求。

我需要能够允许 2 种不同的对齐方式。第一个是经典对齐方式:区域中的左、中、右。二是之后的文字对齐。例如，它可以在区域中左对齐，然后在文本中右对齐，或者文本居中对齐，然后文本在文本中右对齐(见上图)。

示例 1: 示例 2:

这是我当前的实现:https://jsfiddle.net/2vsxfzLd/4/

<div class="container" id="container">
    <p id="captionRegion" class="captionRegion" style="width: 90%; height: 20%; left: 5%; top: 50%; padding: 0%; -webkit-writing-mode: horizontal-tb; text-align: center; background-color: blue;">
        <span class="outerSpan" style="line-height: 18vh; text-align: end; display: inline-block; width: initial;">
            <span class="innerSpan" style="font-size: 24px; line-height: 30px; color: rgb(255, 255, 255); font-style: normal; font-weight: normal; text-decoration: none; font-family: Arial; padding-left: 12.8px; padding-right: 12.8px; vertical-align: middle; width: 100%; background-color: rgb(100, 100, 100);">
                This is center textAlign <br> 
                text aligned "end" inside the box.
            </span>
        </span>
    </p>
</div>

使用以下 CSS:

.container{
    width:160vh; /* 16:9 */
    height:90vh; /* 16:9 */
    position: absolute;
    display: block;
    overflow: hidden;
    margin: 0;
}

.captionRegion{
    position: absolute;
    z-index: 2147483647;
    margin: 0;
    }

.innerSpan{
    display: inline-block;
    line-height: initial;
}

问题是我希望我的灰色文本背景颜色占据 100% 的宽度。

(innerSpan - 显示:内联 block )。

这只能通过将 outerSpan 置于显示模式 inline-block 来实现，这会取消多重对齐。

有什么想法吗？

Answer 1

所以我这样做了:https://jsfiddle.net/2vsxfzLd/9/

感谢 flex 盒子。

<div class="container" id="container">
    <div id="captionRegion" class="captionRegion">
        <div class="outerParagraph">
            <div class="innerSpan">
                <span style="background-color: yellow; color: red; padding-left: 12px; line-height: initial;">
                This is center textAlign
                <br/>text aligned "end" inside the box.
                </span>
            </div>
        </div>
    </div>
</div>