Question

我正在为列表构建模板，其中90％的文本是相同的，只是项目标题和说明是不同的。我不想在每个文本中混淆或编辑相同的文本，但在某些时候它会在标题中引用不同的文本。

无论如何只有HTML5或CSS3，我可以拉动以前使用的标题来动态填充内容吗？几乎就好像它是一个变量？

...例如

标题在这里（再次使用）

此处有独特的描述

内容始终相同

您正在查看标题等等。

请不要使用Javascript或其他语言 - 如果无法使用CSS3或HTML5以最糟糕的方式使用最基本的javascript，但大多数javascript在我正在编码的网站上被阻止。

如果我们用非常简单的Javascript来做这里是来自项目的示例代码......

<div class="content-inner block4 s-text" style="margin-top:-25px">
<h3>Title of Item.</h3>
<p style="text-align: justify;">This is all about the item etc etc etc</p>

<div id="WhatsIncludedBlock">
<div class="content-inner block4 s-text">

<h3>What's Included?</h3>
<p class="para">
<ul><a style="text-decoration: none; cursor: default;"><img style="padding-right: 7px; vertical-align:-1%;" src="http://images.com/bullet2.png" width="10px" height="10px" float="left" alt="bullet point" class="hover"></a>Brand new "Title of Item" direct from supplier.</ul>

第二个区块中的“项目标题”应该从H3标签中自动拉入（这是唯一的，并非所有的H3标签都明显相同，我们需要添加此处所需的任何变量标签它稍后复制）

Answer 1

正如其他人所说的那样，遗憾的是HTML5或CSS3不可能，所以我最终使用了有限的javascript，应该通过。

<script language="javascript">
var title1
title1 = 'Title of Item';
</script>

用

调用

<p><script>document.write (title1);</script></p>

需要时。

Answer 2

在现代浏览器中，您可以。但是会有缺点：无法选择或复制替换文本。见browser support of css variable on caniuse。目前，它支持FF 31 +，Chrome 49 +，Safari 9.1 + / 9.3 +。在IE，Edge 13-和Opera 12中没有任何支持。

无论如何，我认为没有理由拒绝使用像doT这样的模板引擎。

h3::after {
  content: var(--title);
}

<section style="--title: 'First title'">
  <!-- This following content is equal for all sections -->
  <h3></h3>
  <p>Anything here</p>
</section>

<section style="--title: 'The second one'">
  <!-- This following content is equal for all sections -->
  <h3></h3>
  <p>Anything here</p>
</section>

<section style="--title: 'And the last'">
  <!-- This following content is equal for all sections -->
  <h3></h3>
  <p>Anything here</p>
</section>

动态插入以前只使用HTML / CSS的文本？

2 个答案: