圆形跨度标签的响应性

Posted 2023-05-09

【中文标题】圆形跨度标签的响应性

【英文标题】：Responsiviness of circular span tag

【发布时间】：2020-10-08 23:36:22

【问题描述】：

我对这个圆形跨度的当前“形状”不满意，因为它携带的信息越来越大。这个元素只会并且总是显示一个文本编号，我已经看到了一些关于使用 CSS 制作响应式圆圈的主题，但到目前为止我在适应我的代码时没有成功。我仍然认为这可以用 css 简单地解决，但即使使用 javascript 也能得到任何帮助。下面的代码和附图中的results。提前致谢！

.notification 
  background-color: #db0100;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
  border: 2px #db0100 solid;
  text-decoration: none;


.notification+.notification 
  margin-left: 20px


.notification:hover 
  background-color: #fa5554;
  color: #fff;


.notification .badge 
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 8px;
  border-radius: 50%;
  background-color: yellow;
  border: 2px #db0100 solid;
  color: #db0100;

<a href="#" class="notification"><span>Random Text</span><span class="badge">1</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">10</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">100</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">1000</span></a>

【问题讨论】：

您希望徽章如何“响应”？变大？始终保持真实的圆圈？调整文本大小以适应？长成“药丸”形状？

确实有一些问题，其中之一是如果你想保持徽章元素的圆形外观，那么徽章的宽度和高度必须相同，因此对于更长的数字徽章的大小会增加，直到最终覆盖整个元素，除非您正在对1k, 1m 等格式进行四舍五入，但是如果您不这样做，那么您将不得不应用负边距或位置（上、左、右、下）来弥补这一事实

@chazsolo 保持一个真正的圆圈会是这种情况，因为随着数字变大，圆圈会变成椭圆形，但是不管调整文本大小，“保持一个真正的圆圈”是一个好方法吗？

【参考方案1】：

这是一个使用radial-gradient 的技巧。您使元素的高度足够大，并根据内容使宽度足够大。使用circle closest-side 将始终围绕您的文本画一个完美的圆圈：

.notification 
  background-color: #db0100;
  color: white;
  text-decoration: none;
  padding: 15px 26px;
  position: relative;
  display: inline-block;
  border-radius: 2px;
  border: 2px #db0100 solid;
  text-decoration: none;
  margin-top:20px;


.notification+.notification 
  margin-left: 20px


.notification:hover 
  background-color: #fa5554;
  color: #fff;


.notification .badge 
  position: absolute;
  height:80px; /*make this very big, always bigger than the width */
  top:5px;
  right:5px;
  /* center the content*/
  display:flex;
  align-items:center;
  /**/
  transform:translate(50%,-50%);
  padding: 8px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, 
      yellow calc(100% - 2px),#db0100 calc(100% - 1px) 99%,transparent 100%);
  color: #db0100;

<a href="#" class="notification"><span>Random Text</span><span class="badge">1</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">10</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">100</span></a>
<a href="#" class="notification"><span>Random Text</span><span class="badge">1000</span></a>

类似问题：How to auto resize a circle in an ::after pseudo element?

【讨论】：

对于我的应用程序，我可以有更大的数字......所以我想保持圆圈的图案，因为它有一个“固定”的形状，否则我将有一个真正的大圆圈.我想这意味着在这种情况下调整文本的大小？你有什么建议吗？

@Rezik 你总是可以定义一个最大宽度。在所有情况下，如果文本非常大，即使您会考虑“固定”形状，圆圈也应与文本一样大