我正在尝试在其中添加带有文本的圆圈。问题是当字体大小变大时......文本与圆圈重叠。我该如何解决这个问题?
.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;
}
label input[type="checkbox"] {
display:none;
}
input[type="checkbox"]:checked + span {
color: #fff;
}
根据内容调整div的大小时保持圆形(不是椭圆形/椭圆形)并不是一件容易的事。
有一种技术使用绝对定位的伪元素,100%宽度和100%填充底部,以保持圆...圆。
它依赖于这样的事实:填充顶部和填充底部的百分比是基于宽度计算的,而不是大多数人预期的高度,以防止无限循环。听起来很直观,但它确实有效。
然后存在的问题是实际内容不是100%的圆高(也不是包装,因为圆是绝对定位的),所以内容的居中也是具有挑战性的。再次,在padding-top上使用%,以便根据宽度+负变换计算:translateY将完成这一操作。
最后但并非最不重要的是,将单词保持在单独的行上是宽度的工作:min-content。
所有这些,导致了这个:
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;
}
<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>
注意我已经将标签调整为.inner标签,但是将指针事件设置为无,然后在伪元素上重置它,以防止圆圈外(但在框内)的点击切换复选框
你可以为你的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;
}
如果您想在编辑后将其设置为整圆,请添加可能为100px的填充。这样,之后形状仍然是圆形,因为填充物均匀地应用于所有侧面。
.circle label {
padding: 100px;
}
这将是相同的
padding: 100px 100px 100px 100px;
填充:顶部,右侧,底部,左侧。
使用CSS
属性word-break:
然后你可以将它的值设置为break-all
。
.circle label {
word-break: break-all;
}
见文档:https://www.w3schools.com/cssref/css3_pr_word-break.asp
.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>
添加填充和溢出属性
.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
}