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中的文字换行

回答

相关问题