问题：

在固定网格区域内调整可变内容（文本或div）

宋鸿云

2023-03-14

我这里有一个简单的CSS网格的例子，里面有一个固定大小的边框，代表一张标准扑克大小的扑克牌63mm x 88mm。

卡片的每个区域都由gridlayout描述，但必须包含的内容（主要是文本）可以是可变的长度和大小。每个网格单元在63mm x 88mm的父约束内具有“固定”大小“网格自动行:1fr”和“网格自动列:1fr”，并且网格区域包含1个或更多这些单元。

我想问的是，有没有一种方法可以让文本字体大小根据给定网格区域内需要的大小自动减小和增大？

对于其他类型的内容，例如图像，您是否也可以在网格区域内进行缩放？

我已经看到可能有使用svg来实现这一点的方法，但是到目前为止，我还没有找到一个解决方案来在给定的固定网格区域中使用可变的文本长度来适应文本。我更愿意只在HTML和CSS中找到解决方案，但如果Javascript是唯一合理的解决方案，我也会欣然接受。

在此向您表示衷心的感谢

null

<!doctype html>
<html>
  <head>
    <title>Card</title>
    <style>
    .top { grid-area: top; }
    .image { grid-area: image; }
    .bottom { grid-area: bottom; }

    .border {
  border-radius: 10px;
  width: 63mm;
  height: 88mm;  
  background: black;
  display: grid;
  place-items: center;
}
    .container {
  display: grid;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'top top top'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'bottom bottom bottom'
    'bottom bottom bottom'
    ;
  grid-gap: 1px;
  width: 58mm;
  height: 83mm;  
  background: white;
  margin: auto auto;
  padding: 0mm;
}

.container > div {
  background-color: #2196F3;
}
    </style>
    <script></script>
  </head>
  
  <body>
  <div class="border">
        <div class="container">
              <div class="top">If this text ends up becoming too long it will end up either overflowing or changing the size, is there a way to change text size to fit within parent size constraints instead?</div>
              <div class="image">ImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImage</div>
              <div class="bottom">Bottom</div>
        </div>
        </div>
  </body>
</html>

null

共有1个答案

董建茗

2023-03-14

您需要在.imagediv&；它将自动换行，否则使用word-break属性将其换行，如下所示:

null

css lang-css prettyprint-override">.image {
    word-break: break-all;
}

<!doctype html>
<html>
  <head>
    <title>Card</title>
    <style>
    .top { grid-area: top; }
    .image { grid-area: image; }
    .bottom { grid-area: bottom; }

    .border {
  border-radius: 10px;
  width: 63mm;
  height: 88mm;  
  background: black;
  display: grid;
  place-items: center;
}
    .container {
  display: grid;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-template-areas:
    'top top top'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'image image image'
    'bottom bottom bottom'
    'bottom bottom bottom'
    ;
  grid-gap: 1px;
  width: 58mm;
  height: 83mm;  
  background: white;
  margin: auto auto;
  padding: 0mm;
}

.container > div {
  background-color: #2196F3;
}
    </style>
    <script></script>
  </head>
  
  <body>
  <div class="border">
        <div class="container">
              <div class="top">If this text ends up becoming too long it will end up either overflowing or changing the size, is there a way to change text size to fit within parent size constraints instead?</div>
              <div class="image">ImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImageImage</div>
              <div class="bottom">Bottom</div>
        </div>
        </div>
  </body>
</html>

类似资料：

要根据内容长度调整大小的文本区域

问题内容：我需要一个textarea，在框中输入文字，它会根据需要增加长度，以避免必须处理滚动条，并且在删除文本后需要缩小！我不想沿着mootools或jquery路线走，因为我有一个轻量级的表单。问题答案：您可以通过设置为，然后读取属性来检查内容的高度：它可以在Firefox 3，IE 7，Safari，Opera和Chrome下运行。
文本区域的内容不张贴

我有一个表格位于https://pnrbuilder.com/_popups/feedback_popup.html 表单使用post将输入传递到php页面，该页面发送包含post内容的电子邮件，然后重定向用户。输入字段工作正常，但textarea内容无法发送到电子邮件。知道我做错了什么吗？ PHP页面：如果我把下面的内容放在我的php页面的顶部，它会回显textarea的内容
CSS网格-自动调整高度行，调整内容大小

问题内容：我在一个网格中嵌套了两个网格。不幸的是，右边的嵌套网格设置行的高度，以使左边和右边的网格都具有相同的高度，额外的空间在class的div之间共享。如何设置右侧嵌套网格的行以调整内容的大小，使其与左侧嵌套行的高度相同？问题答案：您可以尝试参考您也可以只使用或
固定网格内懒惰列在Jetpack撰写？

目前在Jetpack Compose中，此代码会抛出一个，因为您无法嵌套两个垂直滚动的Composables：我不希望网格本身滚动，而只是显示我传递到其中的可组合的固定网格。在中显示非滚动网格是否有任何解决方法？
内容控件绑定丢失内容控件内文本的格式

当我试图将XML与包含带有格式的文本的内容控件的docx绑定时，文本格式（字体类型、字体大小、颜色等）就会丢失。我正在使用最新的docx4j-3.0.0.jar 有关示例和详细说明，请参见http://www.docx4java.org/forums/data-binding-java-f16/binding-loses-formatting-on-text-inside-content-con
JavaSwing文本在文本区域内乱七八糟

我已经将查询结果格式化为MySql的样式，包含所有 ---- . 有没有办法让JTextArea中的文本和eclipse中的一样？
多个h1内联网格模板区域

大家好，我是html和css的新手，我有一个简单的问题：我写了这个html代码我在6Times 1FR中为类name1、name2、name3创建了一个网格模板区域，重复为{port1 port1 port2 port2 port3 port3}以一行形式显示，当我给每个类提供三个网格区域中的一个时，它会像下面的图像一样显示。我想用网格系统将它们显示在一行中，你能帮我吗。我想要它们在页面上显示，
如何使用webdriver获取文本区域的文本内容？

问题内容：我正在尝试使用Python中的webdriver以 HTML形式获取文本区域的内容。我正在获取文本，但是缺少换行符。该selenium文档是几乎无用的; 他们说： selenium.webdriver.remote.webelement.WebElement类（父代，id_） […] text：获取元素的文本。我目前正在执行以下操作：这会打印文本区域内容的Python unico

在固定网格区域内调整可变内容（文本或div）

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档