div div中的文字換行

我試圖讓每個商品的產品名稱適合div我嘗試過使用word-wrap：break-word; // word-wrap：破解全部;但兩者都不起作用。我也嘗試設置每個div的寬度而不是％，但未在下一項文本上工作文本流。div div中的文字換行

我在做什麼錯？

.scrolls { 
 
    display: inline-block; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    border: solid transparent; 
 
    width: 60vw; 
 
} 
 

 
.scrolls .product { 
 
    display: inline-block; 
 
    border: solid transparent; 
 
    width: 30%; 
 
    height: 240px; 
 
} 
 

 
.scrolls .product .details { 
 
    width: 100%; 
 
    height: 100%; 
 
    font-size: 15px; 
 
    display: inline-block; 
 
    float: left; 
 
    height: 100%; 
 
} 
 

 
.scrolls .product .details ul { 
 
    width: 100%; 
 
    height: 100%; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.scrolls .product .details .liProductName { 
 
    max-width: 150px; 
 
    word-break: break-all; 
 
    border: 1px solid red; 
 
}

<div class="scrolls"> 
 
    <div class="product" ng-repeat="i in products track by $index" align="center"> 
 
    <div class="details"> 
 
     <ul> 
 
     <li class="liProductName"> Portable 20000mAh USB Power Bank LED LCD For Cell Phone External Battery</li> 
 
     <li><img style="width: 90px; height: 120px;" data-ng-src="{{img}}" /></li> 
 
     <li><button id="addItemBtn" class="btn btn-default" ng-click="addItem(i.productId)">Add</button></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-05-01 ZOS90

請分享你的網站鏈接。 –

@Shital：不，OP需要發佈足夠的代碼來重現問題中的問題。否則，只要問題得到解決，未來的參觀者就沒有機會學習，因爲問題將不復存在。我們主動要求提出問題*而不是*發佈鏈接到他們的網站;請參閱：「[我的網站上的東西...不起作用，我可以只是粘貼一個鏈接？]（https://meta.stackoverflow.com/questions/254428/something-in-my-web -site-or-project-doesnt-work-can-i-just-paste-a-link-to-it）「 –

那麼也許你想嘗試這樣的事情？

.scrolls .product .details .liProductName { 
    max-width: 150px; 
    border: 1px solid red; 
    overflow-wrap: break-word; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

否則也許你想是這樣的：

.scrolls .product .details .liProductName { 
    max-width: 150px; 
    word-break: break-word; 
    border: 1px solid red; 
}

這將做的工作，也確實這樣做下面的codesnippet的變化。

.scrolls { 
 
    display: inline-block; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    border: solid transparent; 
 
    width: 60vw; 
 
} 
 

 
.scrolls .product { 
 
    display: inline-block; 
 
    border: solid transparent; 
 
    width: 30%; 
 
    height: 240px; 
 
} 
 

 
.scrolls .product .details { 
 
    width: 100%; 
 
    height: 100%; 
 
    font-size: 15px; 
 
    display: inline-block; 
 
    float: left; 
 
    height: 100%; 
 
} 
 

 
.scrolls .product .details ul { 
 
    width: 100%; 
 
    height: 100%; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.scrolls .product .details .liProductName1 { 
 
    max-width: 150px; 
 
    word-break: break-word; 
 
    border: 1px solid red; 
 
} 
 

 
.scrolls .product .details .liProductName2 { 
 
    max-width: 150px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    border: 1px solid red; 
 
}

<div class="scrolls"> 
 
    <div class="product" ng-repeat="i in products track by $index" align="center"> 
 
    <div class="details"> 
 
     <ul> 
 
     <li class="liProductName1"> Portable 20000mAh USB Power Bank LED LCD For Cell Phone External Battery</li> 
 
     <li><img style="width: 90px; height: 120px;" data-ng-src="{{img}}" /></li> 
 
     <li><button id="addItemBtn" class="btn btn-default" ng-click="addItem(i.productId)">Add</button></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="scrolls"> 
 
    <div class="product" ng-repeat="i in products track by $index" align="center"> 
 
    <div class="details"> 
 
     <ul> 
 
     <li class="liProductName2"> Portable 20000mAh USB Power Bank LED LCD For Cell Phone External Battery</li> 
 
     <li><img style="width: 90px; height: 120px;" data-ng-src="{{img}}" /></li> 
 
     <li><button id="addItemBtn" class="btn btn-default" ng-click="addItem(i.productId)">Add</button></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-05-01 11:57:10 dutchsociety

謝謝我修復了它，它現在正在工作 – ZOS90

真棒，很高興聽到我幫了你，請你給我的答覆投票並給出問題的答案。項目祝你好運！ – dutchsociety

試試這個下面的代碼與重要的「自動換行：打破字很重要;！」！

.scrolls .product .details .liProductName{ 
     max-width:150px; 
     border:1px solid red; 
     word-wrap:break-word !important; 
    }

來源

2017-05-01 11:46:12

不，它沒有工作 – ZOS90

div div中的文字換行

回答

相關問題