Question

我正在开发一个具有特定于该平台的小部件的数据平台我正在使用一个名为map的小部件来显示地图，并且 title 链接到数据库中的地图。地图包含div标题：

<map>
<div class="title">Title</div>
other divs ..
</map>

当我编码时，我无法访问div标题，因为它包含在小部件中。我想用css更改标题的文本。

我查看了这些例子： How can I replace text with CSS?

并做了：

第一个选项

.title伪{ visibility：hidden的 }

.title伪：后{
```
content:"NewTitle" ;
visibility:visible;
```
}

但是“标题”只是隐藏但仍占用空间所以我的“NewTitle”没有居中

第二个选项

.title伪{ text-indent：-9999px; 行高：0; }

.title伪：前{
```
text-indent:0;
content:'Welcome Back!';
display:block;
line-height: initial;
```
}

但是我的NewTitle没有很好地显示出来。

如何在CSS中或最终在Javascript中将“标题”切换为“新标题”。

感谢您的帮助

编辑：显示页面的开头

Flexibilités等......是标题

我无法访问html代码中ods-map下面的内容，因为ods-map是一个小部件。我只能改变css。

Answer 1

JavaScript解决方案是执行此操作的标准：

$('.title').html("new title here"); // jquery
document.getElementsByClassName("title")[0].innerHTML = "new title here" // pure JS

小提琴：

https://jsfiddle.net/qpq45Luc/1/

Answer 2

虽然您的问题未使用css标记，但您获取文字的初始方法是在正确的轨道上。您只需要在伪元素上显式设置display:block;。然后在absolute和伪元素上放置伪元素div并使用相同的填充来保持相似的外观。

这样的事情：

div.title { 
    visibility: hidden; position: relative;
    padding: 4px; 
}

div.title::after {
    content: 'Replaced text';
    visibility: visible;
    display: block; position: absolute;
    padding: 4px; top: 0px;
}

<map>
    <div class="title">Title</div>
</map>

然而，请注意，这仍然是一个黑客。 Javascript是更好的方式，因为文本将在你的控制之下。

Answer 3

这有点像hacky，但是在第一次尝试之后只需添加margin-left：-272px（取决于你的标题）。 https://jsfiddle.net/jmser6yd/2/

.title
{
  visibility: hidden;
}
.title:after
{  
  content: "New Title";
  visibility: visible;
  margin-left: -272px;
}

我仍然更喜欢javascript / jQuery解决方案，正如@messerbill建议的那样

如何使用css交换div中的文本

3 个答案: