阿拉伯语Farsi字体不能让我的半角空格起作用，但是在检查中，通过复制并粘贴相同的代码可以很好地工作

问题描述

运行该代码段，您可以看到产品的评论部分。
我写了一些JavaScript代码来获取用户的名字和姓氏，并将他们的首字母放在一个蓝色的小框中。

问题是该语言使用阿拉伯语（Farsi）字体，并且当用户名是علیحسینی（以阿拉伯语字体）时，它在蓝色框中显示عح。
但是我希望它显示为没有空间的عح（两个字母之间的半空格分隔，但比半空格还要薄）。我想要达到您在图片中看到的效果：

因此，我决定使用 而不是两个字母之间使用空格（半空格）。

但是当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,.1);
  color: rgba(235,.7)
}

.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .nf {
  background-color: rgba(57,145,233,.1);
  color: rgba(57,.75)
}

.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .ubtx-m7 {
  color: rgba(40,40,.8)
}

.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .nf {
  font-size: px(15);
  padding: 8px;
  background-color: rgba(91,91,.05);
  border-radius: 10px;
  color: rgba(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,.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,.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,.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,.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 handleDataChange = useCallback((e) => {
    e.preventDefault();
    setUserData({
      ["job"] : e.target.elements.job.value ? e.target.elements.job.value : "",["fName"] : e.target.elements.fName.value ? e.target.elements.fName.value : "",["lName"] : e.target.elements.lName.value ? e.target.elements.lName.value : "",["email"] : e.target.elements.email.value ? e.target.elements.email.value : "",["phone"] : e.target.elements.phone.value ? e.target.elements.phone.value : "",["country"] : e.target.elements.country.value ? e.target.elements.country.value : "",["city"] : e.target.elements.city.value ? e.target.elements.city.value : "",["pcode"] : e.target.elements.pcode.value ? e.target.elements.pcode.value : "",["birth"] : e.target.elements.birth.value ? e.target.elements.birth.value : "",["summary"]: summary ? summary : "",fireEmployment,fireEducation,fireLinks,fireSkills,fireLanguages
    })
  })
  useEffect(() => {
    const interval = setInterval(() => {
      handleDataChange()
    },5000);
    return () => clearInterval(interval);
  },[handleDataChange]);
<form className="user__infoTop" onSubmit={e => handleDataChange(e)}>
          <h1>Personal Details</h1>
          <div className="user__infoRow">
            <TextField variant="filled" type="text" label="Job Title" name="job" />
            <div className="photo">
              <label htmlFor="upload-photo">
                <Avatar src={img} alt="avatar" />
                <span>
                  Upload <CloudUploadIcon />
                </span>
              </label>
              <input
                type="file"
                id="upload-photo"
                hidden
                onChange={onFileChange}
              />
            </div>
          </div>
          <div className="user__infoRow">
            <TextField variant="filled" type="text" label="First Name" name="fname" />
            <TextField variant="filled" type="text" label="Last Name" name="lname" />
          </div>
          <div className="user__infoRow">
            <TextField variant="filled" type="email" label="email" name="email" />
            <TextField variant="filled" type="text" label="Phone number" name="phone" />
          </div>
          <div className="user__infoRow">
            <TextField variant="filled" type="text" label="Country" name="country" />
            <TextField variant="filled" type="text" label="City" name="city" />
          </div>
          </div>
          </form>

其HTML实体为const letters = [ "\u0639","\u062D" ]; console.log( letters.join( "" ) ); console.log( letters.join( "\u200c" ) );，但是由于您是在设置属性而不是innerHTML，因此您需要使用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,.1);
  color: rgba(235,.7)
}

.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .nf {
  background-color: rgba(57,145,233,.1);
  color: rgba(57,.75)
}

.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7:hover .ubtx-m7 {
  color: rgba(40,40,.8)
}

.usercmmnt-tpl-m7 .ucctn-m7 .ucbtm-m7 .btxicn-m7 .nf {
  font-size: px(15);
  padding: 8px;
  background-color: rgba(91,91,.05);
  border-radius: 10px;
  color: rgba(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,.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,.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,.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,.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
  }
}