CSS 垂直对齐和打断文本

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;

来自 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>

Answer 2

删除

white-space: nowrap;

这会阻止文本环绕。

Fiddle 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 垂直对齐和打断文本

CSS vertically align and break text

css

styling

vertical-alignment

centering