Question

我有一个包含7列的模态对话框。其中一列显示评论部分。如何将此部分限制为25个字符。我在浮点省略号上使用了文本，它在第一个单词后面显示了省略号。我还想为省略号添加功能，以便在点击省略号时，它会弹出一个小窗口，显示注释的整个部分。我该怎么做？我可以帮助我吗？

这是我正在使用的CSS

@评论

Answer 1

在CSS中，我只能在HTML中看到pointer-events和伪elemet以及tabindex属性的技巧。

＆＃13;

p {
  width:12.5em;/* 25 letters space average */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border:solid;
  pointer-events:none;
  position:relative;
  pointer-events:none;
}
p:after {
  content:'';
  position:absolute;
  width:1em;
  height:1.2em;
  right:0;/* lays over the ellipsis */
  top:0;
  pointer-events:auto;
  cursor:pointer;
}
p:focus, p:active {
  white-space:normal
}

＆＃13;

<p tabindex="0">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>

＆＃13;

然后浏览器需要了解指针事件。

将省略号（...）插入div标签，如何向其添加功能

1 个答案: