我被困在无法垂直对齐文本并在每个圆圈中间分开两个词的地步。
例如单词“Classic Collection”需要像下面这样分解,垂直对齐并在圆圈中居中。
Classic
Collection
想知道是否有人可以帮我完成这个。
body {
background-color: #f7f7f7;
}
#coll_container .coll_item {
display: inline-block;
color: #333;
list-style: none;
border-radius: 50%;
transition: 0.3s;
width: 105px;
height: 105px;
text-align: center;
border: solid 3px #333;
}
#coll_container .coll_item a:hover {
margin: 0;
padding: 0;
color: #fff;
}
#coll_container .coll_item a span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
display: block;
font-weight: 600;
border-radius: 50%;
width: 95px;
height: 95px;
padding:2px;
border: solid 3px #fff;
}
#coll_container .coll_item:hover {
background-color: #333;
color:#fff;
}
#coll_container .active {
background-color: #333;
border-radius: 50%;
}
#coll_container .active a span {
color:#fff;
border: solid 3px #333;
}
<div id="coll_container">
<ul class="coll_list">
<li class="coll_item">
<a title="title" class="collections"><span>Classic Collection</span></a>
</li>
<li class="coll_item active">
<a title="title" class="collections"><span>Ultimate Collection</span></a>
</li>
<li class="coll_item">
<a title="title" class="collections"><span>Luxurious Collection</span></a>
</li>
</ul>
</div>
最佳答案
删除无包装代码
text-overflow: ellipsis;
white-space: nowrap;
从 span 和使用 flexbox
body {
background-color: #f7f7f7;
}
#coll_container .coll_item {
display: inline-block;
color: #333;
list-style: none;
border-radius: 50%;
transition: 0.3s;
width: 105px;
height: 105px;
text-align: center;
border: solid 3px #333;
}
#coll_container .coll_item a:hover {
margin: 0;
padding: 0;
color: #fff;
}
#coll_container .coll_item a span {
overflow: hidden;
/*
text-overflow: ellipsis;
white-space: nowrap;
*/
word-wrap: normal;
display: block;
font-weight: 600;
border-radius: 50%;
width: 95px;
height: 95px;
padding: 2px;
border: solid 3px #fff;
display: flex;
align-items: center;
}
#coll_container .coll_item:hover {
background-color: #333;
color: #fff;
}
#coll_container .active {
background-color: #333;
border-radius: 50%;
}
#coll_container .active a span {
color: #fff;
border: solid 3px #333;
}
<div id="coll_container">
<ul class="coll_list">
<li class="coll_item">
<a title="title" class="collections"><span>Classic Collection</span></a>
</li>
<li class="coll_item active">
<a title="title" class="collections"><span>Ultimate Collection</span></a>
</li>
<li class="coll_item">
<a title="title" class="collections"><span>Luxurious Collection</span></a>
</li>
</ul>
</div>
关于CSS 垂直对齐和中断文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52628683/