Question

我正在尝试在其中加入包含文字的圈子。问题是当字体大小变大时......文本与圆圈重叠。我该如何解决这个问题？

const tasks = [
    { x: 1, y: 80 },
    { x: 2, y: 30 },
    { x: 1, y: 50 },
    { x: 2, y: 20 },
    { x: 1, y: 10 },
    { x: 9, y: 40 },
    { x: 1, y: 30 },
    { x: 3, y: 5 },
];

const ySum = (group) => group.reduce((sum, { y: currY }) => sum + currY, 0);


const taskFitsInGroup = (task, group) => {

    if (group.length === 0) {
        return true;
    }

    return (group.length < 2) && (ySum(group) + task.y <= 60);
};


const addTask = (accumulation, task) => {

    const lastGroup = accumulation[accumulation.length - 1];

    if (taskFitsInGroup(task, lastGroup)) {
        lastGroup.push(task);
    } else {
        accumulation.push([task]);
    }

    return accumulation;
};

const result = tasks.reduce(addTask, [[]]);
console.log(result);

JSFiddle Demo

Answer 1

根据内容调整div的大小时保持圆形（不是椭圆形/椭圆形）并非易事。

有一种技术使用具有100％宽度和100％填充底部的绝对定位伪元素，以保持圆圈为圆形。

它依赖于这样的事实：填充顶部和填充底部的百分比是基于宽度计算的，而不是大多数人预期的高度，以防止无限循环。听起来很直观，但它确实有效。

然后存在实际内容不是100％圆高的问题（也不是包装，因为圆是绝对定位的），因此内容的居中也是具有挑战性的。再次，在padding-top上使用％，以便根据宽度+负变换计算：translateY将完成这一操作。

最后但并非最不重要的是，将单词保持在不同的行是宽度的工作：min-content。

所有这些，导致了这个：

＆＃13;

body{
/*just to display circles inline and centered*/
  display:flex; 
  align-items:center;
  flex-wrap: wrap;
}

.circle{
  padding:1em;
}

.inner{
/*centers the content*/
  padding:100% 20px 0 20px;
  transform:translateY(-50%);
/*sets the width as the biggest word*/
  width:min-content;
/*styling*/
  text-align:center; color:white; font-weight:bold; font-family:sans-serif; 
/*sets the label as inline-block, so it doesn't take 100% width*/
  display:inline-block;
/*prevents clicks outside the circle from switching the checkbox*/
  pointer-events:none;
}
.inner::before{
    content:"";
    position:absolute;
/*adjust for the padding + translateY on the element*/
    top:50%; left:0;
/*sets the width as 100% of the element*/
    width:100%;
/*sets the padding-bottom (and therefore, the height) as 100% the width of the element*/
    padding-bottom:100%;
/*styling*/
    background-color:steelblue;
    border-radius:50%;
/*puts it behind the content*/
    z-index:-1;
/*resets the pointer-events so clicking on the circle affects the checkbox */
    pointer-events:auto;
    cursor:pointer;
}

＆＃13;

<input type="checkbox" id="check1">
<div class="circle">
  <label for="check1" class="inner">Really biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig circle</label>
</div> 

<input type="checkbox" id="check2">
<div class="circle">
  <label for="check2" class="inner">small circle</label>
</div>

＆＃13;

注意我已将标签调整为.inner标签，但将指针事件设置为无，然后将其重置为伪元素，以防止在圆圈外（但在框内）发出咔嗒声切换复选框

Answer 2

您可以在css中添加一些填充：

https://jsfiddle.net/jve51qmb/7/

.circle label {
  cursor: pointer;
  height: 200px;
  width: 200px;
  display: table-cell;
  text-align: center;
  padding: 20px 10px 10px 20px;
  vertical-align: middle;
  border-radius: 50%;
  background: yellow;
}

Answer 3

如果您想在编辑后将其设置为整圈，请添加填充，可能 100px 。这样，之后形状仍然是圆形，因为填充物均匀地应用于所有侧面。

 .circle label {
    padding: 100px; 
   }

这与

相同

padding: 100px 100px 100px 100px;

填充：顶部，右侧，底部，左侧。

Answer 4

使用break-all属性.circle label { word-break: break-all; }，然后您可以将其值设置为.circle { display: inline-block; font-size: 42px; } .circle label { cursor: pointer; height: 200px; width: 200px; display: table-cell; text-align: center; vertical-align: middle; border-radius: 50%; background: yellow; word-break: break-all; } label input[type="checkbox"] { display: none; } input[type="checkbox"]:checked + span { color: #fff; font-size: 42px; }。

<div class="circle">
  <label>
    <input type="checkbox" id="Technology Operations" value="on"><span>Technology sdfsdfsdfsdf</span></label>
</div>

请参阅文档：https://www.w3schools.com/cssref/css3_pr_word-break.asp

 Value = 0

 def ChangeValue(Variable):
     Variable = 1

 ChangeValue(Value)

 print(Value)

{{1}}

Answer 5

添加填充和溢出属性

.circle label {
  cursor: pointer;
  height: 200px;
  width: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: yellow;
  overflow: hidden;  # add this
  padding: 10px;     # add this
}

中心文本圈css3问题

5 个答案: