省略号适用于第二个跨度,但不适用于第一个

马特

我在使用省略号属性时遇到了一些奇怪的行为。它完美地适用于一个span元素,但不适用于另一个完全相同的span:

看到这个截图

这怎么可能呢?有人知道如何解决该问题吗?任何帮助是极大的赞赏。

这是我的html:

<div class="parent">
  <span class="ellipsis">sadkljasjkfdhkjlhas-qdasfqewrwqe.pdf</span>  
  <div class="icons-right">
    <a href="#"><img src="edit-icon.gif"></a>
    <a href="#"><img src="delete-icon.gif"></a>
  </div>                                                                     
</div> 

<div class="parent">
  <span class="ellipsis">terribly-terribly-long-filename.doc</span>
  <div class="icons-right">
    <a href="#"><img src="edit-icon.gif"></a>
    <a href="#"><img src="delete-icon.gif"></a>
  </div>                                                                      
</div>

和CSS:

.parent{
  height: 50px;
  padding-left: 15px;
}

.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 15px;
  display: block;
}

.icons-right{
  position: relative;
  top: -25px;
  float: right;
  width: 62px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

Tarwirdur Turon

有人知道如何解决该问题吗?

添加margin-right: 62px;.ellipsis

这是因为您float: right; position: relative; top: -15px的.icons权利。

删除top: -15;,您将看到盒子模型。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

省略号适用于第二个跨度,但不适用于第一个

来自分类Dev

Alexa 技能:适用于第一个问题,但不适用于第二个问题

来自分类Dev

MySQL-WHERE子句中的NOT IN查询具有与第一个表相同的结构,但不适用于第二个表

来自分类Dev

应用仅适用于第一个输入,如果插入第二个输入,则崩溃

来自分类Dev

Jquery 函数适用于表的第一个 td,但不适用于克隆

来自分类Dev

htaccess第二个重写规则不适用于生产

来自分类Dev

为什么第二个参数不适用于strtol?

来自分类Dev

NOPASSWD选项不适用于第二个命令

来自分类Dev

休眠条件setReadOnly不适用于第二个查询

来自分类Dev

第二个html文件上的按钮不适用于Flask

来自分类Dev

Html/CSS/Javascript:弹出 onclick 不适用于第二个 div

来自分类Dev

AdjustResize 不适用于第二个 EditText

来自分类Dev

malloc 不适用于列表的第二个元素

来自分类Dev

创建具有两个分区的USB闪存驱动器:第一个用于引导,第二个用于存储数据-适用于Windows,而非Linux

来自分类Dev

MySQL 触发器适用于同一个表中的一个字段,而不适用于第二个字段

来自分类Dev

InvalidPipeArgument: '[object Object]' 用于管道 'AsyncPipe' --> 适用于第一个循环,但不适用于后者

来自分类Dev

Swift 3下标范围适用于第一个群集,但不适用于中间群集

来自分类Dev

javascript效果仅适用于第一个元素,而不适用于其他元素?

来自分类Dev

not:first-child 适用于所有元素而不适用于第一个

来自分类Dev

.pgpass适用于一个用户,但不适用于postgres用户

来自分类Dev

省略号不适用于长网址

来自分类Dev

ASP.net动态按钮单击事件不适用于第二个foreach循环

来自分类Dev

我的第二个端点不适用于node-js API,为什么?

来自分类Dev

CSS背景颜色不适用于第一个div

来自分类Dev

Mockito returnFirstArg()不适用于通用的第一个arg

来自分类Dev

Magritttr +不适用于LHS的第一个论点

来自分类Dev

元素之间的替换类不适用于第一个元素

来自分类Dev

fancybox不适用于除第一个页面以外的aspxgridview页面

来自分类Dev

ruby 大写不适用于标题的第一个单词

Related 相关文章

  1. 1

    省略号适用于第二个跨度,但不适用于第一个

  2. 2

    Alexa 技能:适用于第一个问题,但不适用于第二个问题

  3. 3

    MySQL-WHERE子句中的NOT IN查询具有与第一个表相同的结构,但不适用于第二个表

  4. 4

    应用仅适用于第一个输入,如果插入第二个输入,则崩溃

  5. 5

    Jquery 函数适用于表的第一个 td,但不适用于克隆

  6. 6

    htaccess第二个重写规则不适用于生产

  7. 7

    为什么第二个参数不适用于strtol?

  8. 8

    NOPASSWD选项不适用于第二个命令

  9. 9

    休眠条件setReadOnly不适用于第二个查询

  10. 10

    第二个html文件上的按钮不适用于Flask

  11. 11

    Html/CSS/Javascript:弹出 onclick 不适用于第二个 div

  12. 12

    AdjustResize 不适用于第二个 EditText

  13. 13

    malloc 不适用于列表的第二个元素

  14. 14

    创建具有两个分区的USB闪存驱动器:第一个用于引导,第二个用于存储数据-适用于Windows,而非Linux

  15. 15

    MySQL 触发器适用于同一个表中的一个字段,而不适用于第二个字段

  16. 16

    InvalidPipeArgument: '[object Object]' 用于管道 'AsyncPipe' --> 适用于第一个循环,但不适用于后者

  17. 17

    Swift 3下标范围适用于第一个群集,但不适用于中间群集

  18. 18

    javascript效果仅适用于第一个元素,而不适用于其他元素?

  19. 19

    not:first-child 适用于所有元素而不适用于第一个

  20. 20

    .pgpass适用于一个用户,但不适用于postgres用户

  21. 21

    省略号不适用于长网址

  22. 22

    ASP.net动态按钮单击事件不适用于第二个foreach循环

  23. 23

    我的第二个端点不适用于node-js API,为什么?

  24. 24

    CSS背景颜色不适用于第一个div

  25. 25

    Mockito returnFirstArg()不适用于通用的第一个arg

  26. 26

    Magritttr +不适用于LHS的第一个论点

  27. 27

    元素之间的替换类不适用于第一个元素

  28. 28

    fancybox不适用于除第一个页面以外的aspxgridview页面

  29. 29

    ruby 大写不适用于标题的第一个单词

热门标签

归档