CSS вертикально выравнивать и разбивать текст - PullRequest
Новая
       27

CSS вертикально выравнивать и разбивать текст

0 голосов
/ 03 октября 2018

Я застрял в точке, где невозможно выровнять текст по вертикали и разбить два слова на середину каждого круга.

Например, слово «Классическая коллекция» нужно разбить, как показано нижевыровнены по вертикали и центрированы по кругу. 

 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/

Ответы [ 3 ]

0 голосов
/ 03 октября 2018

Удалить 

white-space: nowrap;

Остановит обтекание текста.

Скрипка здесь

0 голосов
/ 03 октября 2018

Я думаю, вы можете сделать что-то вроде этого: 

#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;}
0 голосов
/ 03 октября 2018

Удалите код без упаковки 

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>
...