css 多行文本截断还有个时间

CSS是前端开发过程中非常重要的技术之一。在CSS中，有一个非常实用的技术叫做多行文本截断。多行文本截断是指在一个固定高度的容器中，使大段的文字自动隐藏，只显示一部分，并在末尾添加省略号。这个技术在一些需要展示大量文字的场合非常有帮助，可以增加页面的可读性，保证导航的简洁性。

下面是一个样例代码，演示了如何使用CSS来实现多行文本截断：

.truncate {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
  /* 行数 */}
    

在这个代码中，我们首先使用了CSS属性overflow: hidden; 来隐藏超出容器高度的文本。接着，使用text-overflow: ellipsis; 来添加省略号。然后，使用-webkit-box; 和-webkit-box-orient: vertical; 来让文本垂直展示。最后，使用-webkit-line-clamp: 3; 这个属性来指定需要展示的行数。

接下来，我们来提到另一个实用的技术-时间格式化。时间格式化是前端开发中非常常用的技术之一，在我们开发的各种网页和应用中，时间戳是非常普遍的用法，但是时间戳对于用户来说并不直观。因此我们需要对时间戳进行格式化处理，以便用户更好的了解时间。

格式化时间的代码也比较简单，下面是一个简单的JavaScript例子：

function formatDate(timestamp) {
  const date = new Date(timestamp)  const year = date.getFullYear()  const month = date.getMonth() + 1  const day = date.getDate()  return `${
year}
-${
month}
-${
day}
`}
console.log(formatDate(1609146482000)) // 输出 2020-12-28

在这个例子中，我们定义了一个函数formatDate()，接受一个时间戳作为参数，并返回格式化好的日期。在函数中，我们先使用new Date()来创建一个Date对象，然后使用getFullYear()、getMonth()和getDate()方法来获取年月日。最后返回一个${ year} -${ month} -${ day} 格式的字符串。

总的来说，CSS多行文本截断和时间格式化都是非常有用的技术。我们可以在开发中结合它们，为用户带来更好的使用体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！