単語の折り返しの単語

Question

私は単語の折り返しを使用して試したdivに収まるように各項目の商品名を取得しようとしています。 // word-wrap：break-all;どちらもうまくいきませんでした。私はまた、％の代わりに各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>

Answer 1

多分このようなものを試したいですか？また、以下のcodesnippetの変更を行いました、

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

これは、仕事をするだろう：

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

は、そうでなければ多分あなたはこのような何かをしたいです。

.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>

Answer 2

重要でコードの下にこれを試してみてください！ "ワードラップ：ブレークワード重要な;！"

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