div中的自动换行文本

Question

I'm trying to get the product name for each item to fit into the div I've tried using word-wrap: break-word; // word-wrap: break-all; but both didn't work. I also tried setting the width of each div instead of % but didn't work text flows over the next items text.

What am I doing wrong?

 .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

try this below code with !important "word-wrap:break-word !important;"

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

Answer 2

Well maybe you want to try something like this?

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

Otherwise maybe you want something like this:

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

This would do the job, also did do the changes in the codesnippet below.

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