使第二个单词变小答案

【问题标题】：Making second word smaller使第二个单词变小
【发布时间】：2018-12-27 02:41:41
【问题描述】：

我想知道如何使°更小，这是我尝试过的：

$(function() {
  var weather = {};
  weather.temperature = '24';

  $(".wthr").html(weather.temperature + "&deg;");
});

.wthr::last-word {
  font-size: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clock wthr anim04c"><span></span></li>

但它不起作用，我怎样才能使°更小？

【问题讨论】：

无论如何您都在使用.html 对吗？你可以使用<sup>标签
stackoverflow.com/questions/10797686/…
@SK。链接的问题不是 OP 正在寻找的
@AravindS 使用<sup> 不会使字体变小，对吗？
@ochi OP 想让° 变小吗？

标签： javascript css

【解决方案1】：

您可以将° 放在::after 中并为其指定所需的字体大小：

$(".wthr").html("10");

.wthr::after {
  font-size: 60%;
  content: "°";
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clock wthr anim04c"><span class="temp"></span></li>

如果您并不总是需要 .wthr 上的度数符号，那么您也可以在 .wthr 上添加一个类：

$(".wthr")
  .html("10")
  .addClass('deg');

.deg::after {
  font-size: 60%;
  content: "°";
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clock wthr anim04c"><span class="temp"></span></li>

【讨论】：

【解决方案2】：

您可以将 ° 包裹在一个跨度中并减少它的字体。如，

$(function() {
  var weather = {};
  weather.temperature = '24';

  $(".wthr").html(weather.temperature + "<span>&deg;</span>");
});

.wthr span {
  font-size: 50%;
  vertical-align: 7px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="clock wthr anim04c"><span></span></li>

更新：按照@Sangram 的建议编辑

【讨论】：

我无法在您的预览中看到学位？有什么遗漏吗？
添加vertical-align: 7px;，它也保持垂直位置
@SangramNandkhile 已编辑答案，感谢您的建议

【解决方案3】：

您可以尝试将° 包装在一个跨度中并给它一个类或设置内联样式。

$(".wthr").html(weather.temperature +<span style="font-size:50;">"&deg;"</span>);

【讨论】：

您的代码将失败，因为您没有正确匹配/配对您的引号。