Question

** div类容器中有一个段落，如何隐藏“-”之前的文本？ **

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

</body>

</html>

Answer 1

在js

var element = document.querySelector('.container p')
if(element){
    element.innerText = element.innerText.replace(/.*- /, '');
    // if you need non greedy regexp use /.*?- / instead
}

Answer 2

只需将内容放在-之前即可。

，然后应用显示：无显示。

span{
  display: none;
}

Answer 3

隐藏何时，何时再次显示？是否占用空间？

CSS

.hide { color:white }
span:hover { color:black }

<div class="container">
  <p><span class="hide">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </span>- incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

普通JS

var container = document.querySelector("div>p");
var text = container.innerText;
container.innerHTML =  '<span class="hide">'+text.substring(0,text.indexOf("-"))+'</span>'+
  text.substring(text.indexOf("-"))

container.addEventListener("mouseover",function() { this.querySelector("span").classList.toggle("hide")});

.hide { color:white }

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Answer 4

我假设您要动态隐藏此文本，在这种情况下，您将需要javascript，否则正如Nitin暗示的那样，您可以手动在文本中插入<span class="hidden">？

const container = document.querySelector('.container')
const txt = container.querySelector('p').innerHTML.split('-')
const newMarkup = `<span class="hidden">${txt[0]}</span> ${txt[1]}`
container.innerHTML = newMarkup

.hidden {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>

</html>

如何隐藏“-”前的所有文字？

4 个答案: