多行对齐和段落背景

Question

我无法混合两种渲染文字的要求。

我需要能够允许2种不同的对齐方式。第一个是经典的对齐方式：区域中的左侧，中间和右侧。第二个是之后的文本对齐。例如，它可以在区域的左侧对齐，但在文本中右侧对齐，或者在文本对齐的中心对齐，然后在文本中右对齐文本（参见上图）。

示例1： 例2：

以下是我目前的实施：https://jsfiddle.net/2vsxfzLd/4/

.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;
}

使用以下CSS：

perl my_script.pl -some_args  |  tee arg_filename

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

（innerSpan - display：inline-block）。

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

有什么想法吗？

Answer 1

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

感谢弹性框。

<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>