html - 我可以让这个字体有一个线宽，以便它在下一行继续吗？

Question

我有一个 wordpress 网站，我在这个特定页面上使用联系表。每个输入字段都有一个标题，例如“姓名”、“电子邮件”等。它在任何桌面浏览器上看起来都很棒。但是当从 iphone 上查看它时，文本太过分并且与它的输入框不对齐。所以我尝试了以下方法:

.page-id-1656 .entry-content-p {
 width:40% !important;
}

这对文本有效，但问题是缩小了我所有的其他字段。所以输入框不再是我想要的大小。有没有办法只定位文本？

如果这有帮助，这里是输入字段的 CSS:

.page-id-1656 .wpcf7-textarea {
   width:40% !important;
   height:100px !important;
   font-size:15px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   border-radius: 5px 5px 5px 5px;
   border-color:#adadad !important;
   outline:none !important;
}

或者有没有办法使用我尝试过的方法，但让它屏蔽掉 .wpcf7-textarea

编辑:查看源代码给了我这个类:wpcf7-form-control wpcf7-text

编辑 2:Font scaling based on width of container似乎是我正在寻找的答案。我离开这个问题，因为它可能对其他人有帮助。答案是将 font-size 改为 1vw 而不是 15px。将单位更改为 vw 允许字体根据使用它的设备进行调整。

Answer 1

好吧，您可以稍微改进一下 CSS 样式。我想在您的表单标题中有某种 h1/h2/h3 标签？仅包含表单中文本的内容？

只需使用它来使您的 CSS 样式更准确:

.page-id-1656 .entry-content-p > h3 {
   width: 40% !important;
}

或者切换 h3 中的任何情况，但这里的重点是指定指向您的 CSS 样式的直接指针。从这个 Angular 来看，很难说 HTML 代码在表单中是什么样子，也很难为您提供一段有效的代码，但您应该能做到这一点。

编辑:试试这个

.wpcf7 > form > p:first-child {
   width: 40% !important;
}

好像是CF7的通用结构。