【Anki卡片组】NHK新闻听力 623篇 + 日语例句（7613句）

并不是利用css实现的,而是js,因为你处理过的文本,在html编辑器下其实是有p标签的，所以我利用p标签截断了文本，然后用js重写内容，把内容给写到一个表格里去了。我提问是想知道你是不是有做双语对齐，但是打算把更好外观效果的牌组用于收取一定的费用，所以我没有直接放出来。
以下是全部替换的背面模板代码

<div class="section back">
<div class="title">Back</div>
<div class="contents">
<table id = "newstext">
</table>

<jp id="jptext">{{Japanese}}</jp>
<cn id="cntext">{{Chinese}}</cn>

<script type="text/javascript">

	var i=0;
	var jpbox=document.getElementById('jptext').innerHTML;
	var cnbox=document.getElementById('cntext').innerHTML;
	var jparray=jpbox.split("</p>");
	var cnarray=cnbox.split("</p>");

	for (i;i<(jparray.length-1);i++)
		{
			var tablebox=document.getElementById('newstext');
			var trobj=document.createElement('tr');
			trobj.setAttribute("id", "tr"+i);
			tablebox.appendChild(trobj);

			var trxbox=document.getElementById('tr'+i);
			var tdobj=document.createElement('td');
			tdobj.className="jp";
			tdobj.innerHTML=jparray[i];
			trxbox.appendChild(tdobj);
			var trxbox=document.getElementById('tr'+i);
			var tdobj=document.createElement('td');
			tdobj.className="cn";
			tdobj.innerHTML=cnarray[i];
			trxbox.appendChild(tdobj);
		}
</script>
<div class="sound">{{Pronunciation}}</div>
</div>

以下是全文替换的样式代码

/*
正面挖空的代码来自pdawiki论坛，我做了一些修改
NHK新闻的内容来自初心日语同盟微信公众号，非常感谢
Contact: dax26d@gmail.com
*/

@font-face{
 font-family:UD Digi Kyokasho NK-R;
 src:url("UDDigiKyokashoN-R.ttc");
}
@font-face{
 font-family:微软雅黑;
 src:url("msyh.ttc");
}

/* 卡片全局设置 */
.card {
  font-size        : 14px;
  text-align       : left;
  color            : tomato;
  background       : #eeeeee;
}


/*背面卡片的首字母放大*/
.back p::first-letter{
	font-size: 24px;
}


/* 日文部分的字体大小设置，以及离边框都空一个字符 */
.jp{
font-family:UD Digi Kyokasho NK-R;
font-size: 18px;
width:50%;
}

/* 卡片正面的排版设置 */
.hint {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 48px;
	height: 90%;
}

/* 去除卡片正面的段首缩进 */
.hint p{
	text-indent: 0;
}

/* 卡片背面的日文部分第一个字符的颜色设置 */
.back .jp p::first-letter{
	color: #00adb4;
}


/* 卡片背面的中文部分每个字符的颜色设置 */
.back .cn p::first-letter{
	color: tomato;
}

/* 行缩进2个字符 */
p{
text-indent: 2em;
}


/* 中文部分的颜色，边距，字体大小设置 */
.cn {
	font-family:微软雅黑;
	color: #00adb5;
	font-size: 18px;
}

table {
 margin:5px;
 border-collapse:collapse;
}

td {
 border:1.5px solid #999;
 vertical-align:top;
 padding-left:8px;
 padding-right:8px;
 text-align:justify;
}

/*区块全局样式 有mobile是移动设备上的设置，调试根据设备的情况调节 */
.mobile .section {
  background-color : #fbfbea;
  border           : 2px solid burlywood;
  border-radius    : 3px;
  height: 46em;
  overflow: auto;
}

.section {
  background-color : #fbfbea; 
  border           : 2px solid burlywood;
  border-radius    : 3px;
  height: aotu;
}

/* 最上方的横条设置 */
.title{
  display          : block;
  padding          : 5px 12px;
  color			   : white;
}

.front .title {
  background-color : tomato;
}

.back .title {
  background-color : #00adb5;
}

/* 水平分割线设置 */
hr{
  border     : solid #00adb5 12px;
  length: 100%;
}

#jptext {
  display:none;
}

#cntext {
  display:none;
}

如果不想要大量修改样式的话，那么只用背面模板，在样式中，只添加以下代码

#jptext {
  display:none;
}

#cntext {
  display:none;
}

我在我本机和虚拟机中使用anki最新版本测试过，没有发现明显问题，但是在手机上，每段首字符缩进和每段首字符变色效果无法显示的问题，不过不会影响使用。