居中文字即使比容器大

我正在嘗試居中一些文字，但此刻正在掙扎。這是我的文字是如何目前格式化：居中文字即使比容器大

<div class="panel panel-default" ng-repeat="criteria in controller.productCriteria"> 
    <div class="panel-heading"> 
     <div class="row flex"> 
      <div class="col-xs-3 flex flex-column flex-center"><strong>{{ criteria.name }}</strong></div> 
      <div class="col-xs-9 text-center"> 
       <div class="row">    
        <div class="col-xs-3" ng-repeat="attribute in criteria.attributes"> 
         <div class="option" ng-class="{ 'active': attribute.active }"> 
          <div class="point"></div> 
          <span class="small">{{ attribute.name }}</span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

你可以看到它實際上看起來像在這裏：

https://codepen.io/r3plica/pen/QgmVmp

如果你看到的是，中等重量產品實際上比大它的內容，所以它沒有正確居中。我用從這裏的解決方案：

Center Text Larger than Container? (Without using separate child element)

處理這種情況，雖然它實際上確實正確居中文本，它增加，這意味着他們包裹到新的行中列的大小，這是不我想要的是。你可以看到發生在這裏：

https://codepen.io/r3plica/pen/pwLOKW

因此，誰能幫助我？

來源

2017-07-02 r3plica

你可以給一個嘗試彎曲性能：

您codepen forked

.option { 
    color: $silver; 
    display: flex; 
    flex-flow: column; 
    align-items:center; 
    box-shadow:0 0 0 1px;/* see me , remove me */

修改樣本

來源

2017-07-02 18:36:03

居中文字即使比容器大

回答

相關問題