尺寸适应其内容的CSS圆圈[重复]答案

【问题标题】：CSS circle with size adapting to it's content [duplicate]尺寸适应其内容的CSS圆圈[重复]
【发布时间】：2021-08-02 11:03:08
【问题描述】：

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

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

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

&lt;div contentEditable="true" class="circle"&gt;circle&lt;/div&gt;

谁能帮我解决我做错的地方。在此先感谢。

【问题讨论】：

你能把它创建为可运行的嵌入吗？
当然可以，让我这样做
jsfiddle.net/m50xsw1j 请检查这个小提琴
在最新的浏览器中，您可以使用aspect-ratio: 1/1: jsfiddle.net/81ghen06 对于较旧的浏览器，您应该能够使用width:100% rotate(90deg); 使用内部元素技巧，请参阅stackoverflow.com/a/47749136/3702797
但是从你的小提琴圈子开始不断增加..我只想在圆形内填充文本时增加圈子。

标签： html css css-shapes

【解决方案1】：

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

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

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

【讨论】：

当我尝试从 fiddel 以某种方式工作时..当我进入我的代码仍然面临问题并且在我的 css -webkit-shape-outside: circle();没有申请

【解决方案2】：

在纯 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;
}

&lt;div contentEditable="true" id="circle"&gt;circle&lt;/div&gt;

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>

【讨论】：