Как я могу расположить стрелку таблетки в правом центре длинного текста? - PullRequest
Новая
       41

Как я могу расположить стрелку таблетки в правом центре длинного текста?

0 голосов
/ 19 сентября 2018

У меня есть заголовок с длинным текстом, я не могу придумать правильный css, чтобы сделать таблетку в правом центре со всем текстом.Мне нужно две линии или больше, и таблетка должна быть в центре в нужной области.Как кто-нибудь может сказать мне, как это делается?Любая помощь приветствуется.

.c-cta-box-link{
  text-decoration-color: #ffffff;
}

a{
  color: #000;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
.c-cta-box-header {
    padding: 1px 15px 8px;
    background-color: #bbce00;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }
    
.c-cta-box-headline {
    margin-bottom: 0;
    padding-right: 20px;
    font-size: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-text-decoration-color: #fff;
    text-decoration-color: #fff;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    }
    
    .c-cta-box-content {
    height: calc(100% - 40px);
    padding: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 300;
    }
    
    .c-cta-box-link:after {
    content: "";
    position: absolute;
    top: 10%;
    right: 7%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: none;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
    margin: 0;
    white-space: nowrap;
}
<a title="Download som PDF her" href="/-/media/wakeup/pdf/organisationsdiagram-dk-01-07-2017.pdf?la=da&amp;hash=69E3519ABB423F7EA21E655A18F2C7BCAA84A4E5" target="Aktiv browser" class="c-cta-box-link">
<div class="c-cta-box-header">
  <h2 class="c-cta-box-headline">Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF  </h2>
</div> 
<div class="c-cta-box-content"></div>
</a>

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Я легко решил проблему, добавив этот топ: calc (50% - 20px);Calc - это функция, которая позволяет вам выполнять математические вычисления прямо в вашем CSS.Крутые функции на нем в том, что вы можете смешивать и сопоставлять единицы, так что вы можете попросить процентную единицу, но затем вычесть размер пикселя из размера в процентах.

.c-cta-box-link:after {
    content: "";
    position: absolute;
    top: calc(50% - 12px);
    right: 7%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: none;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
    margin: 0;
    white-space: nowrap;
}
0 голосов
/ 19 сентября 2018

Это должно помочь централизовать стрелку, обновите следующие элементы: 

a {
   position: relative;
   display: block;
   color: #000;
   text-decoration: none;
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
}
.c-cta-box-link:after {
   content: "";
   position: absolute;
   top: 50%;
   margin-top: -3px;
   right: 7%;
   width: 0;
   height: 0;
   border-top: 6px solid transparent;
   border-right: none;
   border-bottom: 6px solid transparent;
   border-left: 6px solid #fff;
   margin: 0;
   white-space: nowrap;
}

Примечание: стрелка не будет централизована сразу, потому что пустой c-cta-box-content div вычисляется в относительном пространстветег a.

...