/deep/.benefits-plan-message, /deep/.benefits-welfare-message{ white-space: normal; .my-plan,.my-welfare{ color: #E84929; margin-bottom: 10px; } } /deep/.benefits-plan-message { .plan-title-wrap { display: flex; justify-content: space-between; margin-bottom: 4px; .total-price { color: #e84929; white-space: nowrap; } .paid-money{ color: #e84929; margin: 0 10px; white-space: nowrap; } .plan-status{ white-space: nowrap; } .item-title { max-width: 185px; color: #373737; font-size: 14px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline; margin-right: 8px; cursor: pointer; &:hover{ color: #666; } } } .product-item { display: flex; padding: 16px 0; &:not(:last-child) { border-bottom: 1px dashed #ededed; } img { width: 50px; height: 50px; margin-right: 10px; } .product-detail { display: flex; flex-direction: column; justify-content: space-between; flex: 1; .product-name { word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .price-nums{ display: flex; justify-content: space-between; } } } } /deep/.benefits-welfare-message { .item-title { font-weight: bold; margin-bottom: 10px; } }