div中的单词换行文本

Question

我试图获取每个项目的产品名称以适应我尝试使用自动换行的div：break-word; //自动换行：break-all;但两者都没有奏效。我也尝试设置每个div的宽度而不是％，但是在下一个项目文本上没有工作文本流。

我做错了什么？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

好吧，也许你想尝试这样的事情？

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

这可以完成这项工作，也可以在下面的代码片段中进行更改。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;