Как сделать так, чтобы содержимое в горизонтальном прокручиваемом элементе делилось на две строки? - PullRequest
Новая
       0

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

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

Код ниже производит горизонтальный прокручиваемый div. Я хочу сделать так, чтобы этот текст: I want to break this text up into two lines, был разбит на две строки вместо того, чтобы иметь одну длинную строку. Я попытался уменьшить ширину .navigation-item-content, но текст не разбился на две строки, а просто переместился в .navigation-item-content div.

Есть предложения? Я просто не могу заставить его работать. 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
	.navigation {
      white-space: nowrap;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      background-color: white;
      background-color: lightgray;
    }
    
    .navigation-item {
      padding: 12px 11px 7px 11px;
      width: 100%;	
    }
    
    .navigation-item-content {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-content: center;
    }
    
    .navigation-item-title {
      text-align: center;
    }
</style>
</head>
<body>

<div class="navigation">
    <div class="navigation-item">
        <div class="navigation-item-content">
            <p class="navigation-item-title">
            	<span>I want to break this text up into two lines</span>
            </p>
        </div>
    </div>
    <div class="navigation-item">
        <div class="navigation-item-content">
            <p class="navigation-item-title ">
            	<span>I want to break this text up into two lines</span>
            </p>
        </div>
    </div>
    <div class="navigation-item">
        <div class="navigation-item-content">
            <p class="navigation-item-title ">
            	<span>I want to break this text up into two lines</span>
            </p>
        </div>
    </div>
    <div class="navigation-item">
        <div class="navigation-item-content">
            <p class="navigation-item-title ">
            	<span>I want to break this text up into two lines</span>
            </p>
        </div>
    </div>
</div>

</body>
</html>

Ответы [ 3 ]

2 голосов
/ 18 апреля 2020

Вам нужны некоторые изменения в ваших стилях. .navigation класс делает width: 100%, а .navigation-item класс добавляет width делит 100 на количество предметов. как: 

.navigation {
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: white;
  background-color: lightgray;
  flex: 1 1 100%;
  position: relative;
}

.navigation-item {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 11px 7px 11px;
  flex: 1 0 25%;
  white-space: normal;
}

.navigation-item-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
}    
.navigation-item-title {
  text-align: center;
}
1 голос
/ 18 апреля 2020

Рассмотрите возможность добавления указанной ширины c, чтобы создать разрыв строки и отключить сжатие: 

.navigation {
  display: flex;
  overflow: auto;
  background-color: white;
  background-color: lightgray;
}

.navigation-item {
  padding: 12px 11px 7px 11px;
  width: 200px;
  flex-shrink: 0; /* don't forget this*/
}

.navigation-item-title {
  text-align: center;
}
<div class="navigation">
  <div class="navigation-item">
    <p class="navigation-item-title">
      I want to break this text up into two lines
    </p>
  </div>
  <div class="navigation-item">
    <p class="navigation-item-title ">
      <span>I want to break this text up into two lines
    </p>
  </div>
  <div class="navigation-item">
    <p class="navigation-item-title ">
      I want to break this text up into two lines
    </p>
  </div>
  <div class="navigation-item">
    <p class="navigation-item-title ">
      I want to break this text up into two lines
    </p>
  </div>
</div>
1 голос
/ 18 апреля 2020

Вы можете добавить тег <br> туда, где хотите разбить строку, или удалить white-space:nowrap из .navigation, чтобы не все go в одной строке

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...