我有我的代码的例子：
- <div class="container">
- <div class="item n1">Proe Schugaienz</div>
- <div class="item n2">Proe Schugaienz</div>
- </div>
我使用这样的jQuery代码：
- $('.item').dotdotdot({
- wrap: 'word',fallbackToLetter: false
- })
和css：
- .item {
- margin: 5px;
- background: red;
- padding: 2px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- .n1 {
- width: 8px;
- }
- .n2 {
- width: 80px;
- }
但结果我得到：
结果我想实现这个：
是纯粹的CSS还是dotdotdot.js？
如果单词(句子)不能匹配它的父级：那么只显示默认的单行文本溢出
如果单词(句子)能够逐字适合父母 – 然后匹配它,没有字母连字符！
所以我不希望我的容器被高度扩展(我有很多数据,它只是一个例子,我不能硬编码一些块)
解决方法
你可以使用flex
- <div class="container">
- <span></span>
- <em></em>
- </div>
- .container {
- display: flex;
- justify-content: center; /* centers content horizontally*/
- align-items: center /* centers content vertically*/
- }
