我尝试显示分为3个div的文本-中间一个包含文本的突出显示部分，第一个和最后一个div包含突出显示部分之前和之后的文本的其余部分。
第一个和最后一个flex项都有截断文本的类。这是为了只为用户提供必要的上下文。
我希望突出显示的部分总是水平居中的弹性框的中间，无论数量的文本（包括没有文本）在任何弹性项目。
以下是我目前拥有的：

* {
    font-family: Arial;
}

div > div:first-child {
    direction: rtl;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Curabitur bibendum justo non orci. Aenean fermentum risus id tortor.</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Quisque porta.</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. Sed convallis magna eu sem. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Donec quis nibh at felis congue commodo. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Curabitur bibendum justo non orci. Aenean fermentum risus id tortor.</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Quisque porta.</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary"></div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success">Lorem ipsum</div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">dolor</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">sit amet, consectetuer adipiscing elit.</div>
</div>

<div class="d-flex">
    <div class="flex-fill text-nowrap text-end overflow-hidden text-truncate text-success"></div>
    <div class="flex-shrink-1 text-nowrap fw-bold text-danger px-1">Lorem ipsum dolor</div>
    <div class="flex-fill text-nowrap text-start text-truncate text-primary">sit amet, consectetuer adipiscing elit.</div>
</div>

是否可以使中间的项目始终居中？