大小适应其内容的 CSS 圆圈 JS，相同的 DOMCSS，不同的 DOM

如何解决大小适应其内容的 CSS 圆圈 JS，相同的 DOMCSS，不同的 DOM

大家好，我使用 CSS 形状创建了圆形。
我使用了 contentEditable="true" 以便可以编辑圈子的内容。

现在的问题是，当我在圆圈内编辑文本时，它会超出圆圈。我想要做的是当我添加额外的文本时，文本应该自动移动到圆圈内的下一行。 我不想增加圆圈的宽度和高度。 任何人都可以帮助我在我做错的地方。 这是我的代码：

.circle {
  width: 50px;
  height: 50px;
  background-color: #40a977;
  border-radius: 50%;
  float: left;
  shape-outside: circle();
}

<div contentEditable="true" class="circle">circle</div>

谁能帮我做错地方。提前致谢。

解决方法

您已经创建了一个圆并定义了高度和宽度。结果，在圆圈将扩大以适应所有文本的地方，它会保持在 50 像素 x 50 像素。您可以通过添加 CSS 来解决此问题

min-width: 50px;
min-height: 50px;

去上课。这表示圆圈必须至少为 50 像素 x 50 像素，但可能会更大，具体取决于里面的文字。我希望这能回答你的问题！

,

在纯 CSS 中，您不能将元素的宽度影响到高度。

使用 JS，您可以创建一个关于修改的事件，并根据宽度值调整高度或内边距（使文本保持居中）。

通过 DOM 修改，您可以在 CSS 中访问父宽度。如果未定义，则父级将带子级。

JS，相同的 DOM

function updateCircle(circle) {
  let width = Number.parseInt(getComputedStyle(circle).width);
  let lineHeight = Number.parseInt(getComputedStyle(circle).lineHeight);
  circle.style.paddingTop = (width - lineHeight) / 2 + 'px';
  circle.style.paddingBottom = (width - lineHeight) / 2 + 'px';
};

// Modify on edit
document.getElementById('circle').addEventListener('input',function(){
  updateCircle(this);
});

// On page load
updateCircle(document.getElementById('circle'));

#circle {
  padding: 0;
  background-color: #40a977;
  border-radius: 50%;
  float: left;
  
  font-size: 16px;
  line-height: 16px;
}

<div contentEditable="true" id="circle">circle</div>

CSS，不同的 DOM

#circle {
  padding: 0;
  float: left;
}

#circle > div{
  height: 16px;
  background-color: #40a977;
  border-radius: 50%;
  padding: calc(50% - 16px / 2) 0;
  
  font-size: 16px;
  line-height: 16px;
}

<div id="circle">
  <div contentEditable="true">circle</div>
</div>