將省略號（...）插入div標簽，如何向其添加功能

Question

我有一個包含7列的模態對話框。 其中一列顯示評論部分。 如何將此部分限制為25個字符。 我在浮點省略號上使用了文本，它在第一個單詞后面顯示了省略號。 我還想為省略號添加功能，以便在點擊省略號時，它會彈出一個小窗口，顯示注釋的整個部分。 我該怎么做？ 任何人都可以幫我嗎？

這是我正在使用的CSS

@評論

Answer 1

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

 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 } 

 <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> 

然后瀏覽器需要了解指針事件。