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