在较大文本中显示/隐藏一些文本

问题描述 投票：0回答：1

我试图在段落中间显示/隐藏一些文本（突出显示）。这些标准至关重要：

  1. 我需要灵活的方法来处理单线或多线。
  2. 我需要它不要弄乱段落文本的其余部分
    line-height
    。

以下是我迄今为止所掌握的内容，但都不完全正确。版本 1 有我更喜欢的过渡，即 

<mark>
标签的宽度减少到零，并使用 
overflow: hidden
来掩盖文本，因为它正在减少尺寸。问题是它不能是多行的。版本 2 是一个折衷方案，减少了 
font-size: 0px;
但可以是多行的。

有没有任何解决方案可以让它工作（看起来像版本 1，但功能像版本 2）？或者还有其他解决方案吗？ （我也尝试过

transform: scaleX(0);
，但这不起作用）。

body
{
    font-size: 15px;
    line-height: 21px;
    font-family: 'Open Sans';
}

.section
{
    position: relative;
    margin: 0px 0px 50px 0px;
    width: 500px;
    height: 210px;
    background: #eeeeee;
    border: 1px solid #666666;
}

.paragraph
{
    position: relative;
    width: 100%;
    height: 100%;
    display: inline;
    vertical-align: middle;
}

.paragraph1
{
    background: #00ffff;
}

.paragraph2
{
    background: #00ffff;
}


/* version 1 */
.mark1
{
    position: relative;
    top: 2px;
    width: 150px;
    height: 21px;
    transition: all 1.0s;
    vertical-align: bottom;
    display: inline-block;
    overflow: hidden;
    white-space: pre;
}

.mark1 span
{
    position: relative;
    top: -2px;
    height: 23px;
    display: inline-block;
    background: #cccccc;
}

.mark1.hidden
{
  width: 0px;
  transition: all 1.0s;
}


/* version 2 */
.mark2
{
    position: relative;
    transition: all 1.0s;
    vertical-align: bottom;
    background: #00ff00;
}

.mark2 span
{
    position: relative;
    padding: 0px 0px 0px 0px;
    background: #cccccc;
}

.mark2.hidden
{
  font-size: 0px;
  transition: all 1.0s;
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>example</title>
  <link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
</head>

<body>


<button onclick="
const collection = document.getElementsByClassName('mark1');

for (let i = 0; i < collection.length; i++) {
collection[i].classList.toggle('hidden');
}
">toggle version 1</button>

<div class="section">
<div class="paragraph paragraph1">
Lorem Ipsum is<mark class="mark1"> <span>simply dummy text of</span></mark> the printing and typesetting industry. <mark class="mark1"><span>Lorem Ipsum</span> </mark>has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>



<button onclick="
const collection = document.getElementsByClassName('mark2');

for (let i = 0; i < collection.length; i++) {
collection[i].classList.toggle('hidden');
}

">toggle version 2</button>

<div class="section">
<div class="paragraph paragraph2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the<mark class="mark2"> <span>industry's standard dummy text ever since the 1500s</span></mark>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

</body>

</html>

javascript html css
1个回答
0
投票

要存档此内容，您至少需要 2 个元素

<span class="mark-placeholder">simply dummy text of</span>
<span class="mark-highlight">simply dummy text of</span>
</mark>```

At this point you can animate width on mark-placeholder
and transform mark-hightlight as you wish without interupt layout since its absolute








body
{
    font-size: 15px;
    line-height: 21px;
    font-family: 'Open Sans';
}

.section
{
    position: relative;
    margin: 0px 0px 50px 0px;
    width: 500px;
    height: 210px;
    background: #eeeeee;
    border: 1px solid #666666;
}

.paragraph
{
    position: relative;
    width: 100%;
    height: 100%;
    display: inline;
    vertical-align: middle;
}

.paragraph1
{
    background: #00ffff;
}

.paragraph2
{
    background: #00ffff;
}


/* version 1 */
.mark1
{
    position: relative;
    width: 150px;
    height: 21px;
    transition: all 1.0s;
    vertical-align: bottom;
    display: inline-block;
    overflow: hidden;
    white-space: pre;
}

.mark1.hidden
{
  width: 0px;
  transition: all 1.0s;
}

.mark-placeholder
{
position: relative;
opacity: 0;
display: inline-block;
}

.mark-hightlight
{
box-sizing: border-box;
display: block;
color: red;
background-color: #cccccc;
z-index: 1;
position: absolute;
bottom: 0%;
top: -0;
left: 0%;
right: 0%;
transform: translateY(-10%);
}


<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>example</title>
  <link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
</head>

<body>


<button onclick="
const collection = document.getElementsByClassName('mark1');

for (let i = 0; i < collection.length; i++) {
collection[i].classList.toggle('hidden');
}
">toggle version 1</button>

<div class="section">
<div class="paragraph paragraph1">
Lorem Ipsum is<mark class="mark1"> <span class="mark-placeholder">simply dummy text of</span><span class="mark-hightlight">simply dummy text of</span></mark> the printing and typesetting industry. has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>



<button onclick="
const collection = document.getElementsByClassName('mark2');

for (let i = 0; i < collection.length; i++) {
collection[i].classList.toggle('hidden');
}

">toggle version 2</button>

<div class="section">
<div class="paragraph paragraph2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the<mark class="mark2"> <span>industry's standard dummy text ever since the 1500s</span></mark>, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.