我的div元素忽略了長文本的CSS樣式

我有一個設置爲特定寬度的元素列表。然而，無論出於何種原因，含有大量文本的元素都忽略CSS以使自己變得更長。我的div元素忽略了長文本的CSS樣式

<ion-view view-title="Events"> 
<ion-content class="events-body"> 
    <div ng-repeat="month in vm_events.months | orderBy: 'monthNum'"> 
     <div class="card"> 
      <div class="item item-divider"> 
       {{month.monthName}} 
      </div> 
      <div class="card eventCard" 
       ng-repeat="event in vm_events.events | filter: {month: month.monthName} | orderBy: 'orderBy'" 
       ui-sref="app.events.event-details({eventID: event.id})"> 
       <ion-item ui-sref="app.events.event-details({eventID: event.id})"> 
        <div class="flex-container eventDay"> 
         <div class="flex-item left" ui-sref="app.events.event-details({eventID: event.id})"> 
          <div class="flex-item day" ng-show="event.day">{{event.day}}</div> 
          <div class="flex-item tbd" ng-hide="event.day">TBD</div> 
          <div class="flex-item dayOfWeek">{{event.weekday}}</div> 
         </div> 
         <div class="flex-item right eventSummary"> 
          <div class="name"> 
           {{event.name}} 
          </div> 
          <div class="flex-container timeAndPlace"> 
           <div class="flex-item place">{{event.location}}</div> 
           <div class="flex-item time">{{event.start}}</div> 
          </div> 
         </div> 
        </div> 
       </ion-item> 
      </div> 
     </div> 
    </div> 
</ion-content> 
</ion-view>

這是scss。

.events-body { 
font-weight: 100; 


.card { 
    margin: 0; 
    border-radius: 0; 
    padding-bottom: 8px; 
    box-shadow: none; 

    .item.item-divider { 
     height: 20px; 
     min-height: 0; 
     border-radius: 0; 
     padding: 0 0 0 16px; 
     background-color: #909090; 

     font-size: 12px; 
     color: white; 
    } 

    .eventCard { 
     width: 98%; 
     margin: 10px 4px; 

     font-size: 16px; 
     letter-spacing: 2px; 

     ion-item.item.item-complex { 
      border-radius: 0; 

      a.item-content { 
       border-radius: 0; 
       padding: 0; 

       &.activated .right{ 
        background: #8ebce3; 

       } 
      } 

      .left { 
       min-width: 21%; 
       margin: 0; 
       background-color: #e3e3e3; 

       display: flex; 
       flex-direction: column; 
       justify-content: center; 

       .flex-item { 
        align-self: center; 
        margin: 0; 
       } 

       .day { 
        margin: 2px; 

        font-size: 28px; 
       } 

       .tbd { 
        font-size: 20px; 
       } 

       .dayOfWeek { 
        font-size: 14px; 
       } 
      } 

      .right { 
       width: 100%; 
       margin: 0; 
       padding: 10px 18px; 
       background: #4089c9; 
       flex-direction: column; 

       font-size: 14px; 
       color: white; 
       line-height: 20px; 

       .timeAndPlace { 
        width: 92%; 
        justify-content: space-between; 
        align-items: flex-end; 

        .place { 
         width: 70%; 
         overflow: hidden; 
         text-overflow: ellipsis; 
        } 

        .time { 
         width: 30%; 
        } 
       } 
      } 
     } 
    } 
} 

.flex-container { 
    display: flex; 
} 
}

我們使用一些內部的東西以及npm gulp和cordova。不過，我想我可以展示這些。

不管我在div元素中有多少文本，如果它小於某個長度，寬度是正確的。否則，寬度開始動態調整。我試圖將其更改爲最大寬度，但這沒有任何幫助。

這是什麼原因造成的？我該如何解決？另外，我使用了Chrome的inspect元素，並且該元素的計算樣式仍然表示70％，儘管與其他70％元素的尺寸不同。

來源

2016-07-08 G-Rex

這是因爲您的Flexbox意圖隨其內容而增長。爲防止出現這種情況，請在您的Flexbox項目上使用最大寬度。

.flexBox { 
    display: flex; 
    width: 98%; 
    margin: 10px 4px; 

    .location { 
    width: 70%; 
    max-width: 70%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    } 

    .time { 
    max-width: 30% 
    width: 30% 
    } 
}

來源

2016-07-08 19:23:00 Cameron637

好吧，我試過了，但它仍然沒有改變它出於某種原因。 –

對不起，嘗試在物品上使用它，我相應地更新了我的答案 – Cameron637

再次感謝，但它仍然不是很好玩。我應該補充說它在元素檢查器中說寬度是70％。 –

嘗試之前離子的默認CSS文件把YOUE CSS文件。

來源

2016-07-08 19:23:25

我的div元素忽略了長文本的CSS樣式

回答

相關問題