css一直显示title

CSS是前端开发中必不可少的一部分，起到了美化页面、布局排版的作用。但是很多时候，我们需要在页面中展示较长的文本内容，这时我们就会用到title属性。然而，title属性在默认情况下是不会一直显示在页面上的，为了实现这一目的，我们可以采用以下方法。

 p {
    position: relative;
  }
  p:hover::after {
    content: attr(title);
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    z-index: 999;
  } 

以上代码中，我们给需要展示title的元素添加了一个伪元素::after，并且设置了content属性为attr(title)，这样就能够将title显示在页面上了。同时，我们给::after设置了display: block属性，使得伪元素能够在页面上占据空间，也就是一直显示在页面上。我们还为伪元素设置了样式，包括位置、背景颜色、字体颜色、边框圆角、层级等，可以根据实际需求进行调整。

在实际应用中，我们可以将以上代码封装成一个类，如下所示：

 .show-title {
    position: relative;
  }
  .show-title:hover::after {
    content: attr(title);
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    z-index: 999;
  } 

这样，在需要展示title的元素上添加show-title类即可实现一直显示title的效果。

通过以上的方法，我们可以解决一些特定情况下需要展示长文本的问题，同时也可以增强页面的交互性。当然，使用这种方法需要注意一些细节，如样式的调整、兼容性等，在实际使用中需要具体分析。