CSS: Как обернуть заголовок, не нажимая вниз текст под ним - PullRequest
Новая
       8

CSS: Как обернуть заголовок, не нажимая вниз текст под ним

0 голосов
/ 16 апреля 2020

Я хочу, чтобы текст абзаца (Lorem ipsum) в этих 3 столбцах всегда был горизонтально выровнен сверху. Однако в определенный момент текст заголовка сжимается, в результате чего содержимое, расположенное внизу, сдвигается вниз. Как сохранить эти абзацы встроенными независимо от переноса текста заголовка?

enter image description here

Выглядит хорошо! Но когда экран сжимается ... enter image description here

.about-columns-section {
  margin: 75px 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.about-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 75px;
  flex-basis: 30%;
  max-width: 400px;
}

.about-column div {
  width: 100%;
  margin: 0 0 10px 0;
  position: relative;
  padding-left: 1em;
}

.about-column div p {
  font-size: 1.3em;
}

.about-column div span {
  position: absolute;
  left: 0;
  top: 2px;
}

.about-column h1 {
  font-size: 2.5em;
  font-family: Copperplate;
}
<section class="about-columns-section">
  <div class="about-column">
    <h1>Foo</h1>
    <div><span><Icon aria-hidden="false" name="angle double right" size="small" /></span>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
  <div class="about-column">
    <h1>Foo</h1>
    <div><span><Icon aria-hidden="false" name="angle double right" size="small" /></span>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
  <div class="about-column">
    <h1>Foo</h1>
    <div><span><Icon aria-hidden="false" name="angle double right" size="small" /></span>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
</section>

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Как говорит @HermitCrab, вы должны добавить это первое добавление пробела: nowrap в .about-column h1, но я предложу вам включить еще одну вещь, чтобы установить отступ и максимальную ширину в% в .about. , а затем откалибруйте нужный процент, посмотрите, как он выглядит: 

.about-columns-section {
  margin: 75px 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.about-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2%;
  flex-basis: 28%;
  max-width: 28%;
  border: 1px solid red;
}

.about-column div {
  width: 100%;
  margin: 0 0 10px 0;
  position: relative;
  padding-left: 1em;
}

.about-column div p {
  font-size: 1.3em;
}

.about-column div span {
  position: absolute;
  left: 0;
  top: 2px;
}

.about-column h1 {
border: 1px solid;
  font-size: 2.5em;
  font-family: Copperplate;    
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<section class="about-columns-section">
  <div class="about-column">
    <h1>Foo long long long long</h1>
    <div><span><Icon aria-hidden="false" name="angle double right" size="small" /></span>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
  <div class="about-column">
    <h1>Foo</h1>
    <div><span><Icon aria-hidden="false" name="angle double right" size="small" /></span>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
  <div class="about-column">
    <h1>Foo</h1>
    <div><span><Icon aria-hidden="false" name="angle double right" size="small" /></span>
      <p>Lorem ipsum ...</p>
    </div>
  </div>
</section>

</body>
</html>
0 голосов
/ 16 апреля 2020

Добавить это css: 

.about-column h1 {
  font-size: 2.5em;
  font-family: Copperplate;    
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...