阿拉伯语(波斯语)字体不会让我的 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 实体是 &#8204; 但由于您设置的是属性而不是内部 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>