Question

现在，我正尝试为我的游戏域创建一个愚蠢的子域。它只是显示馅饼的前几十万个数字。显然，它有很多位数，它不在页面上。而不是让数字从y轴上的页面下移，我希望它沿着x轴的页面下移。我不完全确定该怎么做，因为我不是编码大师。

我试图通过向主体添加最大宽度来做到这一点，并且尝试为样式中的p元素设置宽度，但是没有一个起作用。

<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轴上全部向下滚动。

Answer 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>

Answer 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>

Answer 3

为此使用css：

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

这将破坏您的字符串并将其放入下一行。

制作大量文本不会在屏幕外溢出，而是在屏幕底部溢出

3 个答案: