时间戳

首页 > 解决方案 > 在一行中显示产品并放置点的限制

css - 在一行中显示产品并放置点的限制

问题描述

我使用下面的代码将标题放在一行中，但是，如果最后一个单词很长，它会...代替单词，有没有办法把几个单词的字母没有完全放...

.title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
}

标签： css

解决方案

我的脑子里有两个选择。

1.

.title {
  width: 230px;
  height: 1.2em;
  overflow: hidden;
  word-break: break-all;
}
<div class="title">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, tempore?
</div>

2.

.title {
  width: 230px;
  overflow: hidden;
  white-space: nowrap;
 }
<div class="title">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, tempore?
</div>

推荐阅读