Question

我被困在无法垂直对齐文本并在每个圆圈的中间将两个单词分开的地方。

例如，单词“ 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>

http://jsfiddle.net/r9Lte1mu/5/

Answer 1

删除无包装代码

text-overflow: ellipsis;
white-space: nowrap;

从跨度并使用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>

Answer 2

删除

white-space: nowrap;

这将阻止文字环绕。

提琴here

Answer 3

我认为您可以这样做：

#coll_container .coll_item a span {
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 600;
 border-radius: 50%;
 width: 95px;
 height: 95px;
 padding:2px;
 border: solid 3px #fff;}

CSS垂直对齐并中断文本

3 个答案: