阿拉伯语(波斯语)字体不会让我的 half-space 工作,但在检查中通过复制和粘贴相同的代码可以正常工作
Arabic (Farsi) font won't let my half-space work, But in inspect it works fine by copy and pasting the same code
运行 代码段,您可以看到产品的评论部分。
我写了一些 JavaScript 代码来获取用户的名字和姓氏,并将他们的第一个字母放在一个蓝色的小盒子里。
问题是该语言使用阿拉伯语(波斯语)字体,当用户名是 علی حسینی(阿拉伯语字体)时,它会在蓝色框中显示 ù。
但我希望它像 ù Í 一样显示,没有 space(在两个字母之间像 semi-space 分开,但比 semi-space 更薄)。我想达到你在图片中看到的东西:
所以我决定使用  
而不是在两个字母之间使用 space(semi-space)。
但是当 JS 添加这段代码时它不起作用,当我复制并粘贴相同的代码时检查它工作正常。
我认为问题出在字母字体上,所以我将代码更改为 ᾒ
或 ;8082#&
等。但问题仍然存在,没有结果,尽管事实上没有错误或警告,而且 JS 在其他方面工作正常。
(function($) {
$.fn.commentAttr = function(options) {
$(".upndata-m7").each(function() {
var full_name = $(this).find(".untx-m7").text();
var name_split = full_name.split(" ");
var first_name_letter = '';
var last_name_letter = '';
if (typeof(name_split[0]) != "undefined" && name_split[0] !== null && name_split !== '') {
var first_name = name_split[0];
first_name_letter = first_name.charAt(0);
}
if (typeof(name_split[1]) != "undefined" && name_split[1] !== null && name_split !== '') {
var last_name = name_split[1];
last_name_letter = last_name.charAt(0);
}
$(this).find('.usrpic-tpl-s1 figure').attr("data-img", first_name_letter + ' ' + last_name_letter);
});
};
})(jQuery);
$(document).ready(function() {
$.fn.commentAttr();
});
.usrpic-tpl-s1 figure[data-img] {
width: 40px;
height: 40px;
border-radius: 10px;
position: relative;
text-transform: uppercase
}
.usrpic-tpl-s1 figure[data-img].c1-s1 {
background-color: rgba(62, 158, 232, .8)
}
.usrpic-tpl-s1 figure[data-img].c2-s1 {
background-color: rgba(232, 150, 62, .8)
}
.usrpic-tpl-s1 figure[data-img].c3-s1 {
background-color: rgba(241, 3, 70, .8)
}
.usrpic-tpl-s1 figure[data-img]::after {
content: attr(data-img);
left: 50%;
position: absolute;
top: 40%;
transform: translate(-50%, -50%);
color: #fff;
font-size: rem(21);
font-weight: 800;
white-space: nowrap
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 {
padding-top: 35px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 {
padding-top: 0;
padding-bottom: 45px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 .rctn-m7 {
position: relative
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucmain-m7 {
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 {
display: inline-block;
width: 100%;
vertical-align: middle;
padding-top: 30px;
position: relative;
background-color: orange
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #49bb5e
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #eb2d5a
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 10px 15px;
border-radius: 20px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
display: inline-block;
font-weight: 300;
font-size: rem(15);
line-height: 30px;
color: #333;
text-align: justify;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
margin-bottom: 15px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
margin-bottom: 35px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
max-width: 140px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .userprp-tpl-m7 {
display: inline-block;
vertical-align: middle
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .uname-m7 {
margin-bottom: 6px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .untx-m7 {
display: inline-block;
font-size: rem(18);
font-weight: 500;
color: #333;
line-height: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .udtx-m7 {
display: inline-block;
width: 100%;
font-size: rem(15);
font-weight: 300;
color: #78797b
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 {
text-align: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li {
display: inline-block;
margin-left: 38px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li:last-child {
margin-left: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 {
padding: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7.like-m7:hover .nf {
background-color: rgba(235, 45, 90, .1);
color: rgba(235, 45, 90, .7)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .nf {
background-color: rgba(57, 145, 233, .1);
color: rgba(57, 145, 233, .75)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .ubtx-m7 {
color: rgba(40, 40, 40, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .nf {
font-size: px(15);
padding: 8px;
background-color: rgba(91, 91, 91, .05);
border-radius: 10px;
color: rgba(91, 91, 91, .2);
transition: all .3s ease 0s;
margin-left: 8px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .ubtx-m7 {
font-size: rem(15);
color: rgba(91, 91, 91, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
margin-bottom: 21px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
text-align: left;
float: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 {
display: inline-block;
width: 107px;
text-align: center;
background-color: #e77b33;
color: #fff;
border-radius: 5px;
padding: 3px 0 2px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 .ubtx-m7 {
font-size: rem(12)
}
@media only screen and (min-width:480px) {
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
width: auto;
max-width: inherit
}
}
@media only screen and (min-width:768px) {
.usercmmnt-tpl-m7.ucanswr-m7 .in-answer-m7 {
padding: 30px
}
.usercmmnt-tpl-m7.ucanswr-m7 .txtcmmnt-tpl-m7 {
padding-right: 150px
}
.usercmmnt-tpl-m7 .ucctn-m7 {
padding-top: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .ucinftx-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .ucinftx-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
display: table;
width: 100%;
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
display: table-cell;
vertical-align: top;
width: 120px;
padding-left: 16px;
padding-top: 20px;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: none
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 {
display: table-cell;
vertical-align: top
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
margin-left: 11px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
width: auto;
margin: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
float: unset;
margin-bottom: 13px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 20px 30px;
border-radius: 50px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: transparent;
padding: 0;
border-radius: 0;
margin-top: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
line-height: 36px
}
}
@media only screen and (min-width:992px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 35px
}
}
@media only screen and (min-width:1200px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 135px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="usercmmnt-tpl-m7 ucanswr-m7">
<div class="ucctn-m7">
<div class="ucmain-m7">
<div class="lctn-m7">
<div class="ucinftx-m7">
<div class="upndata-m7">
<div class="usrpic-tpl-s1">
<figure class="c1-s1" data-img="رم"></figure>
</div>
<div class="uname-m7">
<span class="untx-m7">علی حسینی</span>
</div>
<div class="udata-m7">
<span class="udtx-m7">17 شهریور 98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
您想要的实体是 Zero Width Non-Joiner Character (U+200C)
const letters = [ "\u0639", "\u062D" ];
console.log( letters.join( "" ) );
console.log( letters.join( "\u200c" ) );
它的 HTML 实体是 ‌
但由于您设置的是属性而不是内部 HTML,因此您需要 javascript 转义形式("\u200C"
):
(function($) {
$.fn.commentAttr = function(options) {
$(".upndata-m7").each(function() {
var full_name = $(this).find(".untx-m7").text();
var name_split = full_name.split(" ");
var first_name_letter = '';
var last_name_letter = '';
if (typeof(name_split[0]) != "undefined" && name_split[0] !== null && name_split !== '') {
var first_name = name_split[0];
first_name_letter = first_name.charAt(0);
}
if (typeof(name_split[1]) != "undefined" && name_split[1] !== null && name_split !== '') {
var last_name = name_split[1];
last_name_letter = last_name.charAt(0);
}
$(this).find('.usrpic-tpl-s1 figure').attr("data-img", first_name_letter + '\u200c' + last_name_letter);
});
};
})(jQuery);
$(document).ready(function() {
$.fn.commentAttr();
});
.usrpic-tpl-s1 figure[data-img] {
width: 40px;
height: 40px;
border-radius: 10px;
position: relative;
text-transform: uppercase
}
.usrpic-tpl-s1 figure[data-img].c1-s1 {
background-color: rgba(62, 158, 232, .8)
}
.usrpic-tpl-s1 figure[data-img].c2-s1 {
background-color: rgba(232, 150, 62, .8)
}
.usrpic-tpl-s1 figure[data-img].c3-s1 {
background-color: rgba(241, 3, 70, .8)
}
.usrpic-tpl-s1 figure[data-img]::after {
content: attr(data-img);
left: 50%;
position: absolute;
top: 40%;
transform: translate(-50%, -50%);
color: #fff;
font-size: rem(21);
font-weight: 800;
white-space: nowrap
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 {
padding-top: 35px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 {
padding-top: 0;
padding-bottom: 45px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 .rctn-m7 {
position: relative
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucmain-m7 {
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 {
display: inline-block;
width: 100%;
vertical-align: middle;
padding-top: 30px;
position: relative;
background-color: orange
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #49bb5e
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #eb2d5a
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 10px 15px;
border-radius: 20px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
display: inline-block;
font-weight: 300;
font-size: rem(15);
line-height: 30px;
color: #333;
text-align: justify;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
margin-bottom: 15px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
margin-bottom: 35px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
max-width: 140px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .userprp-tpl-m7 {
display: inline-block;
vertical-align: middle
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .uname-m7 {
margin-bottom: 6px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .untx-m7 {
display: inline-block;
font-size: rem(18);
font-weight: 500;
color: #333;
line-height: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .udtx-m7 {
display: inline-block;
width: 100%;
font-size: rem(15);
font-weight: 300;
color: #78797b
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 {
text-align: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li {
display: inline-block;
margin-left: 38px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li:last-child {
margin-left: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 {
padding: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7.like-m7:hover .nf {
background-color: rgba(235, 45, 90, .1);
color: rgba(235, 45, 90, .7)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .nf {
background-color: rgba(57, 145, 233, .1);
color: rgba(57, 145, 233, .75)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .ubtx-m7 {
color: rgba(40, 40, 40, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .nf {
font-size: px(15);
padding: 8px;
background-color: rgba(91, 91, 91, .05);
border-radius: 10px;
color: rgba(91, 91, 91, .2);
transition: all .3s ease 0s;
margin-left: 8px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .ubtx-m7 {
font-size: rem(15);
color: rgba(91, 91, 91, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
margin-bottom: 21px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
text-align: left;
float: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 {
display: inline-block;
width: 107px;
text-align: center;
background-color: #e77b33;
color: #fff;
border-radius: 5px;
padding: 3px 0 2px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 .ubtx-m7 {
font-size: rem(12)
}
@media only screen and (min-width:480px) {
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
width: auto;
max-width: inherit
}
}
@media only screen and (min-width:768px) {
.usercmmnt-tpl-m7.ucanswr-m7 .in-answer-m7 {
padding: 30px
}
.usercmmnt-tpl-m7.ucanswr-m7 .txtcmmnt-tpl-m7 {
padding-right: 150px
}
.usercmmnt-tpl-m7 .ucctn-m7 {
padding-top: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .ucinftx-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .ucinftx-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
display: table;
width: 100%;
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
display: table-cell;
vertical-align: top;
width: 120px;
padding-left: 16px;
padding-top: 20px;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: none
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 {
display: table-cell;
vertical-align: top
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
margin-left: 11px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
width: auto;
margin: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
float: unset;
margin-bottom: 13px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 20px 30px;
border-radius: 50px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: transparent;
padding: 0;
border-radius: 0;
margin-top: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
line-height: 36px
}
}
@media only screen and (min-width:992px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 35px
}
}
@media only screen and (min-width:1200px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 135px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="usercmmnt-tpl-m7 ucanswr-m7">
<div class="ucctn-m7">
<div class="ucmain-m7">
<div class="lctn-m7">
<div class="ucinftx-m7">
<div class="upndata-m7">
<div class="usrpic-tpl-s1">
<figure class="c1-s1" data-img="رم"></figure>
</div>
<div class="uname-m7">
<span class="untx-m7">علی حسینی</span>
</div>
<div class="udata-m7">
<span class="udtx-m7">17 شهریور 98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
运行 代码段,您可以看到产品的评论部分。
我写了一些 JavaScript 代码来获取用户的名字和姓氏,并将他们的第一个字母放在一个蓝色的小盒子里。
问题是该语言使用阿拉伯语(波斯语)字体,当用户名是 علی حسینی(阿拉伯语字体)时,它会在蓝色框中显示 ù。
但我希望它像 ù Í 一样显示,没有 space(在两个字母之间像 semi-space 分开,但比 semi-space 更薄)。我想达到你在图片中看到的东西:
 
而不是在两个字母之间使用 space(semi-space)。
但是当 JS 添加这段代码时它不起作用,当我复制并粘贴相同的代码时检查它工作正常。
我认为问题出在字母字体上,所以我将代码更改为 ᾒ
或 ;8082#&
等。但问题仍然存在,没有结果,尽管事实上没有错误或警告,而且 JS 在其他方面工作正常。
(function($) {
$.fn.commentAttr = function(options) {
$(".upndata-m7").each(function() {
var full_name = $(this).find(".untx-m7").text();
var name_split = full_name.split(" ");
var first_name_letter = '';
var last_name_letter = '';
if (typeof(name_split[0]) != "undefined" && name_split[0] !== null && name_split !== '') {
var first_name = name_split[0];
first_name_letter = first_name.charAt(0);
}
if (typeof(name_split[1]) != "undefined" && name_split[1] !== null && name_split !== '') {
var last_name = name_split[1];
last_name_letter = last_name.charAt(0);
}
$(this).find('.usrpic-tpl-s1 figure').attr("data-img", first_name_letter + ' ' + last_name_letter);
});
};
})(jQuery);
$(document).ready(function() {
$.fn.commentAttr();
});
.usrpic-tpl-s1 figure[data-img] {
width: 40px;
height: 40px;
border-radius: 10px;
position: relative;
text-transform: uppercase
}
.usrpic-tpl-s1 figure[data-img].c1-s1 {
background-color: rgba(62, 158, 232, .8)
}
.usrpic-tpl-s1 figure[data-img].c2-s1 {
background-color: rgba(232, 150, 62, .8)
}
.usrpic-tpl-s1 figure[data-img].c3-s1 {
background-color: rgba(241, 3, 70, .8)
}
.usrpic-tpl-s1 figure[data-img]::after {
content: attr(data-img);
left: 50%;
position: absolute;
top: 40%;
transform: translate(-50%, -50%);
color: #fff;
font-size: rem(21);
font-weight: 800;
white-space: nowrap
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 {
padding-top: 35px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 {
padding-top: 0;
padding-bottom: 45px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 .rctn-m7 {
position: relative
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucmain-m7 {
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 {
display: inline-block;
width: 100%;
vertical-align: middle;
padding-top: 30px;
position: relative;
background-color: orange
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #49bb5e
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #eb2d5a
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 10px 15px;
border-radius: 20px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
display: inline-block;
font-weight: 300;
font-size: rem(15);
line-height: 30px;
color: #333;
text-align: justify;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
margin-bottom: 15px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
margin-bottom: 35px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
max-width: 140px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .userprp-tpl-m7 {
display: inline-block;
vertical-align: middle
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .uname-m7 {
margin-bottom: 6px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .untx-m7 {
display: inline-block;
font-size: rem(18);
font-weight: 500;
color: #333;
line-height: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .udtx-m7 {
display: inline-block;
width: 100%;
font-size: rem(15);
font-weight: 300;
color: #78797b
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 {
text-align: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li {
display: inline-block;
margin-left: 38px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li:last-child {
margin-left: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 {
padding: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7.like-m7:hover .nf {
background-color: rgba(235, 45, 90, .1);
color: rgba(235, 45, 90, .7)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .nf {
background-color: rgba(57, 145, 233, .1);
color: rgba(57, 145, 233, .75)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .ubtx-m7 {
color: rgba(40, 40, 40, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .nf {
font-size: px(15);
padding: 8px;
background-color: rgba(91, 91, 91, .05);
border-radius: 10px;
color: rgba(91, 91, 91, .2);
transition: all .3s ease 0s;
margin-left: 8px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .ubtx-m7 {
font-size: rem(15);
color: rgba(91, 91, 91, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
margin-bottom: 21px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
text-align: left;
float: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 {
display: inline-block;
width: 107px;
text-align: center;
background-color: #e77b33;
color: #fff;
border-radius: 5px;
padding: 3px 0 2px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 .ubtx-m7 {
font-size: rem(12)
}
@media only screen and (min-width:480px) {
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
width: auto;
max-width: inherit
}
}
@media only screen and (min-width:768px) {
.usercmmnt-tpl-m7.ucanswr-m7 .in-answer-m7 {
padding: 30px
}
.usercmmnt-tpl-m7.ucanswr-m7 .txtcmmnt-tpl-m7 {
padding-right: 150px
}
.usercmmnt-tpl-m7 .ucctn-m7 {
padding-top: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .ucinftx-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .ucinftx-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
display: table;
width: 100%;
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
display: table-cell;
vertical-align: top;
width: 120px;
padding-left: 16px;
padding-top: 20px;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: none
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 {
display: table-cell;
vertical-align: top
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
margin-left: 11px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
width: auto;
margin: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
float: unset;
margin-bottom: 13px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 20px 30px;
border-radius: 50px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: transparent;
padding: 0;
border-radius: 0;
margin-top: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
line-height: 36px
}
}
@media only screen and (min-width:992px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 35px
}
}
@media only screen and (min-width:1200px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 135px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="usercmmnt-tpl-m7 ucanswr-m7">
<div class="ucctn-m7">
<div class="ucmain-m7">
<div class="lctn-m7">
<div class="ucinftx-m7">
<div class="upndata-m7">
<div class="usrpic-tpl-s1">
<figure class="c1-s1" data-img="رم"></figure>
</div>
<div class="uname-m7">
<span class="untx-m7">علی حسینی</span>
</div>
<div class="udata-m7">
<span class="udtx-m7">17 شهریور 98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
您想要的实体是 Zero Width Non-Joiner Character (U+200C)
const letters = [ "\u0639", "\u062D" ];
console.log( letters.join( "" ) );
console.log( letters.join( "\u200c" ) );
它的 HTML 实体是 ‌
但由于您设置的是属性而不是内部 HTML,因此您需要 javascript 转义形式("\u200C"
):
(function($) {
$.fn.commentAttr = function(options) {
$(".upndata-m7").each(function() {
var full_name = $(this).find(".untx-m7").text();
var name_split = full_name.split(" ");
var first_name_letter = '';
var last_name_letter = '';
if (typeof(name_split[0]) != "undefined" && name_split[0] !== null && name_split !== '') {
var first_name = name_split[0];
first_name_letter = first_name.charAt(0);
}
if (typeof(name_split[1]) != "undefined" && name_split[1] !== null && name_split !== '') {
var last_name = name_split[1];
last_name_letter = last_name.charAt(0);
}
$(this).find('.usrpic-tpl-s1 figure').attr("data-img", first_name_letter + '\u200c' + last_name_letter);
});
};
})(jQuery);
$(document).ready(function() {
$.fn.commentAttr();
});
.usrpic-tpl-s1 figure[data-img] {
width: 40px;
height: 40px;
border-radius: 10px;
position: relative;
text-transform: uppercase
}
.usrpic-tpl-s1 figure[data-img].c1-s1 {
background-color: rgba(62, 158, 232, .8)
}
.usrpic-tpl-s1 figure[data-img].c2-s1 {
background-color: rgba(232, 150, 62, .8)
}
.usrpic-tpl-s1 figure[data-img].c3-s1 {
background-color: rgba(241, 3, 70, .8)
}
.usrpic-tpl-s1 figure[data-img]::after {
content: attr(data-img);
left: 50%;
position: absolute;
top: 40%;
transform: translate(-50%, -50%);
color: #fff;
font-size: rem(21);
font-weight: 800;
white-space: nowrap
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 {
padding-top: 35px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 {
padding-top: 0;
padding-bottom: 45px
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucctn-m7 .rctn-m7 {
position: relative
}
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7 .ucmain-m7 {
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 {
display: inline-block;
width: 100%;
vertical-align: middle;
padding-top: 30px;
position: relative;
background-color: orange
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #49bb5e
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxstar-m7 .ucrcmnd-m7 {
background-color: #eb2d5a
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 10px 15px;
border-radius: 20px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
display: inline-block;
font-weight: 300;
font-size: rem(15);
line-height: 30px;
color: #333;
text-align: justify;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
margin-bottom: 15px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
margin-bottom: 35px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
max-width: 140px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .userprp-tpl-m7 {
display: inline-block;
vertical-align: middle
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .usrpic-tpl-s1 {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
margin-left: 10px
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .ucinftx-m7 .uname-m7 {
display: inline-block
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .uname-m7 {
margin-bottom: 6px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .untx-m7 {
display: inline-block;
font-size: rem(18);
font-weight: 500;
color: #333;
line-height: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .upndata-m7 .udtx-m7 {
display: inline-block;
width: 100%;
font-size: rem(15);
font-weight: 300;
color: #78797b
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 {
text-align: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li {
display: inline-block;
margin-left: 38px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .ubitms-m7 ul li:last-child {
margin-left: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 {
padding: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7.like-m7:hover .nf {
background-color: rgba(235, 45, 90, .1);
color: rgba(235, 45, 90, .7)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .nf {
background-color: rgba(57, 145, 233, .1);
color: rgba(57, 145, 233, .75)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .ubtx-m7 {
color: rgba(40, 40, 40, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .nf {
font-size: px(15);
padding: 8px;
background-color: rgba(91, 91, 91, .05);
border-radius: 10px;
color: rgba(91, 91, 91, .2);
transition: all .3s ease 0s;
margin-left: 8px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .ubtx-m7 {
font-size: rem(15);
color: rgba(91, 91, 91, .8)
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
display: inline-block;
vertical-align: middle;
width: 100%;
margin-bottom: 21px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
text-align: left;
float: left
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 {
display: inline-block;
width: 107px;
text-align: center;
background-color: #e77b33;
color: #fff;
border-radius: 5px;
padding: 3px 0 2px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .ucrcmnd-m7 .ubtx-m7 {
font-size: rem(12)
}
@media only screen and (min-width:480px) {
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
width: auto;
max-width: inherit
}
}
@media only screen and (min-width:768px) {
.usercmmnt-tpl-m7.ucanswr-m7 .in-answer-m7 {
padding: 30px
}
.usercmmnt-tpl-m7.ucanswr-m7 .txtcmmnt-tpl-m7 {
padding-right: 150px
}
.usercmmnt-tpl-m7 .ucctn-m7 {
padding-top: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .ucinftx-m7 {
background-color: rgba(73, 187, 94, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.good-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .ucinftx-m7 {
background-color: rgba(235, 45, 90, .06)
}
.usercmmnt-tpl-m7 .ucctn-m7.bad-m7 .uctxt-m7 {
background-color: transparent
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucmain-m7 {
display: table;
width: 100%;
margin-bottom: 40px
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 {
display: table-cell;
vertical-align: top;
width: 120px;
padding-left: 16px;
padding-top: 20px;
margin-bottom: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .rctn-m7 .upndata-m7 {
display: none
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 {
display: table-cell;
vertical-align: top
}
.usercmmnt-tpl-m7 .ucctn-m7 .lctn-m7 .upndata-m7 {
display: inline-block;
vertical-align: middle;
margin-left: 11px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 {
width: auto;
margin: 0
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxstar-m7 .stars-tpl-m7 {
float: unset;
margin-bottom: 13px
}
.usercmmnt-tpl-m7 .ucctn-m7 .ucinftx-m7 {
background-color: rgba(231, 123, 51, .06);
padding: 20px 30px;
border-radius: 50px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 {
background-color: transparent;
padding: 0;
border-radius: 0;
margin-top: 30px
}
.usercmmnt-tpl-m7 .ucctn-m7 .uctxt-m7 .tx-m7 {
line-height: 36px
}
}
@media only screen and (min-width:992px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 35px
}
}
@media only screen and (min-width:1200px) {
.usercmmnt-tpl-m7.ucanswr-m7 .uaitms-m7>ul>li {
padding: 0 135px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="usercmmnt-tpl-m7 ucanswr-m7">
<div class="ucctn-m7">
<div class="ucmain-m7">
<div class="lctn-m7">
<div class="ucinftx-m7">
<div class="upndata-m7">
<div class="usrpic-tpl-s1">
<figure class="c1-s1" data-img="رم"></figure>
</div>
<div class="uname-m7">
<span class="untx-m7">علی حسینی</span>
</div>
<div class="udata-m7">
<span class="udtx-m7">17 شهریور 98</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>