时间戳

首页 > 解决方案 > 文本选择突出显示扩展到整个 div 的宽度 (CSS)

html - 文本选择突出显示扩展到整个 div 的宽度 (CSS)

问题描述

我在一个网站上工作，但是当我选择（突出显示）文本段落时，选择会扩展到整个部分宽度。我该如何避免这种情况？

这是 HTML 代码：

.intro-project {
  font: 140%/1.5;
  width: 100vw;
  height: auto;
  margin: 0 auto;
  padding-top: 5%;
  color: rgba(29, 29, 27, 1)
}

.intro-project p {
  width: 55%;
  margin: 0 auto
}
<section>
  <div class="intro-project">
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
      ea commodo consequat.
    </p>
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
</section>

这就是它的样子：

在此处输入图像描述

标签： htmlcss

解决方案

在没有看到您已经应用的附加代码的情况下，一个简单的 CSS 解决方案可能是：

p{
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all; 
}

当您单击 p 时，它应该突出显示内部文本。如果您不希望将其应用于所有 P 标签，那么您可以向 P 标签添加一个类，指定应该突出显示的类。

注意：不确定 MS 是否支持。

推荐阅读