2.新增样式.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. #box {
  9. width: 200px;
  10. height: 200px;
  11. border: 1px solid #000;
  12. background-color: transparent;
  13. /* 强制不换航 */
  14. white-space: nowrap;
  15. /* 溢出隐藏 */
  16. overflow: hidden;
  17. /* 文本变成省略号 */
  18. text-overflow: ellipsis;
  19. box-shadow: 10px 20px 30px #0f0;
  20. text-shadow: 50px 20px 3px #f00;
  21. /* opacity: 0; */
  22. display: none;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div id="box">
  28. 这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
  29. </div>
  30. <script>
  31. var box = document.getElementById("box");
  32. box.addEventListener('click',function(){
  33. alert("111")
  34. })
  35. </script>
  36. </body>
  37. </html>