css - CSS垂直对齐并中断文本

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

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

最佳答案

删除无包装代码

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>

关于css - CSS垂直对齐并中断文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52628683/