как вызвать перенос слов при добавлении во флексбокс вставленного содержимого; - PullRequest
Новая
       10

как вызвать перенос слов при добавлении во флексбокс вставленного содержимого;

0 голосов
/ 12 июля 2020

У меня есть некоторая разметка в настраиваемом элементе, например, 

<div class="competition">
  <slot><slot>
  <div id="compname">2019 Football Competition</div>
</div>

Когда нет содержимого со слотами, я бы хотел, чтобы эта панель выглядела так (ascii art) 

---------------------------------------------------------------------
|                    2019 Football Competition                       |
---------------------------------------------------------------------

который сосредоточен на одной линии. Я бы хотел, чтобы он оставался таким, если слот-контент не очень большой, поэтому, например, если слот-контент был настроен следующим образом 

<my-competition-header>
  <div>Joe Bloggs</div>
  <div>2:14:16</div>
</my-competition-header>

, я заканчиваю что-то вроде этого 

---------------------------------------------------------------------
|   Joe Bloggs       2:14:16           2019 Football Competition    |
---------------------------------------------------------------------

Это красиво распределено с пространством вокруг.

Немного, если бы контент был немного длиннее, так что не все подходило или устройство, отображающее его, было меньше, я бы хотел закончить с этим 

---------------------------------------------------------------------
|                                                          2019     |
|   JoeBloggsHasVeryLongNameSUCHTHATITOVERFLOWS 2:14:16  Football   |
|                                                       Competition |
---------------------------------------------------------------------

Я пробовал различные формы css, подобные этой (это решает мои первую и вторую проблемы, но разваливается на последней). 

  .competition
    display: flex;
    flex-direction: row;
    justify-content: space-around;  
    align-items: center;     
  }
  ::slotted(*) {
    flex: 1 0 0;
    margin: 0 auto;
  } 
  .competition>div#compname {
    flex: 0 1 auto;
    margin: 0;
  }

На в последнем он заканчивается так: 

---------------------------------------------------------------------
|                                                  2019             |
|JoeBloggsHasVeryLongNameSUCHTHATITOVERFLOWS2:14:16Football         |
|                                                  Competition      |
---------------------------------------------------------------------

, и я не совсем понимаю, почему. Может ли кто-нибудь подсказать, как я могу решить эту проблему

1 Ответ

0 голосов
/ 12 июля 2020

Вы можете использовать макет с несколькими столбцами, используя column-count и colmn-width, например 

div {
 -webkit-column-count: 3;
 -moz-column-count: 3;
 column-count: 3;
}

div {
 -webkit-column-width: 150px;
 -moz-column-width: 150px;
 column-width: 150px;
}

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

.competition {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
}

div {
  text-align: center;
  margin: 10px;
}
<div class="competition">
  <div>Joe Bloggs | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>2:14:16| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div id="compname">2019 Football Competition | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
...