“断字”在 CSS 网格中无法正常工作
[英]“word-break” does not work correctly in CSS Grid
问题描述
I have a problem with CSS grid.
我对 CSS 网格有疑问。
In a Firefox, when the width of the screen is reduced (eg to 600px), some elements on pages that uses CSS Grid do not support word-break value.在 Firefox 中，当屏幕宽度减小（例如到 600 像素）时，使用 CSS 网格的页面上的某些元素不支持word-break值。 They remain on the same line as they were.他们仍然在同一条线上。
I tried to add a display: inline-block but it didn't fix that.我试图添加一个display: inline-block但它没有解决这个问题。
That's the bug:这就是错误：
* { box-sizing: border-box; } body { margin: 0 0; padding: 0 0; }.grid { text-align: center; align-items: center; justify-content: center; width: 100%; display: grid; margin-right: auto; margin-left: auto; }.item { grid-area: one; display: grid; }
<div class="grid"> <div class="item"> <p>Some looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</p> <p>Some looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong line</p> </div> </div>
Is there any property I have to or can use to solve this problem?有没有我必须或可以使用的属性来解决这个问题？
1 个解决方案
解决方案1
0 2020-07-22 09:36:10
You need to Wrap your text using CSS.您需要使用 CSS 包装您的文本。 You can check how it works on w3schools here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap您可以在此处查看它在 w3schools 上的工作方式： https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap
Example code copied from above page:从上面的页面复制的示例代码：
<:DOCTYPE html> <html> <head> <style> div { width; 150px: border; 1px solid #000000. } div:a { word-wrap; normal. } div:b { word-wrap; break-word: } </style> </head> <body> <h1>The word-wrap Property</h1> <h2>word-wrap: normal (default):</h2> <div class="a"> This div contains a very long word. thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line:</div> <h2>word-wrap: break-word:</h2> <div class="b"> This div contains a very long word. thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.