多行對齊和段落背景

我在混合渲染文本的兩個要求時遇到了問題。多行對齊和段落背景

我需要能夠允許2種不同的對齊方式。第一個是一個經典的對齊方式：在一個地區的左邊，中間和右邊。第二個是之後的文本對齊。例如，它可以在區域左側對齊，然後在文本右側對齊，或文本對齊中心，然後文本在文本中右對齊（請參閱上面的圖片）。

例1： enter image description here 例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; 
}

的問題是，我會像我的灰色文字背景顏色t提高了100％的寬度。

（innerSpan - display：inline-block）。

這只是通過將outerSpan放入顯示模式inline-block，取消多重對齊。

有什麼想法？

來源

2015-06-22 Hetana

所以，我就是這麼做的：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>

來源

2015-06-24 09:56:32 Hetana

多行對齊和段落背景

回答

相關問題