Блог

Главная - Вопросы по программированию - Создание огромного блока текста, который не выходит за пределы экрана, а вместо этого переполняется в нижней части экрана

Создание огромного блока текста, который не выходит за пределы экрана, а вместо этого переполняется в нижней части экрана

#html #css

#HTML #css

Вопрос:

Прямо сейчас я пытаюсь создать просто глупый поддомен для моего игрового домена. Это просто отображение первых сотен тысяч цифр pie. очевидно, что при таком количестве цифр он исчезает со страницы. Вместо цифр, уходящих со страницы по оси y, я хочу, чтобы они шли вниз по странице по оси x. Я не совсем уверен, как это сделать, поскольку я не мастер кодирования.

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

 <html>
<head>
  <title>π</title>
  <style>
      body {
        width: 1000px;
        overflow-y: auto;
      }

      h1 {
        margin: 30px 30px 30px 30px;
      }

      p {
        color: grey;
        margin: auto;
      }

  </style>
</head>


<body max-width='1000'>
    <h1>Ever wondered what the first thousands of digits of pi are 
but you never could... Well ugbrain has solved that problem...</h1>

    <p>DIGITS OF PIE GO HERE</p>

Я ожидаю, что вместо результатов будет прокрутка вниз по оси x, а не все в одной строке по оси y.

Комментарии:

1. Итак, вы называете свой собственный проект глупым?

2. Обратите внимание, что атрибут max-width='1000' в теле ничего не делает.

Ответ №1:

Установите ширину основного текста на плавный размер, чтобы избежать горизонтальной прокрутки body элемента. Или используйте медиа-запросы, чтобы убедиться, что ширина вашего основного текста не больше ширины области просмотра.

Затем установите для вашего элемента pi значение word-break: break-all; , чтобы получить цифры в нескольких строках. Например:

 body {
  width: 100%;
  margin: 0;
}

h1 {
  margin: 30px 30px 30px 30px;
}

p {
  color: grey;
  max-width: 100%;
  word-break: break-all;
}  
 <body>
  <h1>Ever wondered what the first thousands of digits of pi are but you never could... Well ugbrain has solved that problem...</h1>

  <p>3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679821480865132823066470938446095505822317253594081284811174502841027019385211055596446229489549303819644288109756659334461284756482337867831652712019091456485669234603486104543266482133936072602491412737245870066063155881748815209209628292540917153643678925903600113305305488204665213841469519415116094330572703657595919530921861173819326117931051185480744623799627495673518857527248912279381830119491298336733624406566430860213949463952247371907021798609437027705392171762931767523846748184676694051320005681271452635608277857713427577896091736371787214684409012249534301465495853710507922796892589235420199561121290219608640344181598136297747713099605187072113499999983729780499510597317328160963185950244594553469083026425223082533446850352619311881710100031378387528865875332083814206171776691473035982534904287554687311595628638823537875937519577818577805321712268066130019278766111959092164201989</p>

</body>

Комментарии:

1. Плавная ширина все равно приведет к горизонтальной прокрутке.

2. Проверьте свой фрагмент с фактическим значением Pi, и вы увидите.

3. ОК. Это было бы в браузере по умолчанию margin для body. Исправлена горизонтальная прокрутка.

4. ОК. Еще несколько настроек, и вы полностью скопировали мой ответ.

5. А, @Brainfeeder? Не совсем, у вас все еще есть горизонтальная полоса прокрутки для тела 😉

Ответ №2:

 <html>
    <head>
        <title>π</title>
        <style>
            body, html {
                width: 100%;
                height:100%;
            }
            h1 {
                margin: 30px 30px 30px 30px;
            }
            .pi {
                color: grey;
                max-width:100%;
                word-break:break-all;
            }

        </style>
    </head>


    <body>
        <h1>Ever wondered what the first thousands of digits of pi are 
        but you never could... Well ugbrain has solved that problem...</h1>

        <p class="pi">DIGITS OF PIE GO HERE</p>
    </body>
</html>

Комментарии:

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

Ответ №3:

Используйте css для этого:

 p {
  color: grey;
  margin: auto;
  word-break: break-all;
}

Это разорвет вашу строку и поместит ее в следующую строку.

Комментарии:

1. Это все равно будет зависеть от ширины основного текста. Если ширина основного текста равна 1000px, а видовой экран равен 640px, у вас все равно будет горизонтальная прокрутка

2. Я не понимаю, почему OP устанавливает body значение 1000 пикселей… Я думаю, что это была его попытка попытаться решить свою проблему. body в большинстве случаев следует подстроиться под viewport.