html - 如何为所有人设置通用规则
适合各种字体大小的页面的元素？
问题描述
我使用 rtf-html 转换器将 rtf 文档转换为 html。在 html 容器中，我很难将转换后的 rtf 文档放入不同字体大小的容器中。这里有一些小提琴，它们显示了当我将转换的 RTF 内容设置为 HTML 时容器中的内容。
字体大小 6pt：https ://jsfiddle.net/r4ad9yg7/
字体大小 7pt：https ://jsfiddle.net/osg91jb5/
字体大小 8pt：https ://jsfiddle.net/tazpLy19/1/
字体大小 9pt：https ://jsfiddle.net/o2wtx08z/
字体大小 10pt：https ://jsfiddle.net/rpu62gvk/
字体大小 11pt：https ://jsfiddle.net/2bonhf57/
我需要一个通用的 css 规则，通过调整元素的边距、填充或 lineHeight 来<p>适应容器（ ）的所有字体大小。<body><p>
<p>我需要通过增加元素的边距或填充或...来删除空白区域。不能添加任何其他<P>元素，rtf 数据在页面中完全匹配
解决方案
在 Body 标签中检查 New Css。
body {
border: 1px solid black;
width: 6.98in;
height: 11.15in;
}
.top{
display: flex;
flex-direction: column;
justify-content: space-between;
height:100%;
background:yellow;
}
@page {
size: 6.98in 11.15in
}
p {
line-height: 100%;
margin: 0;
font-size: 10pt;
background: yellow;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="generator" content="LibreOffice 6.0.7.3 (Linux)" />
<meta name="created" content="00:00:00" />
<meta name="changed" content="00:00:00" />
</head>
<body lang="en-US" dir="ltr">
<div class="top">
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">0</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">1</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">2</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">3</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">4</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">5</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">6</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">7</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">8</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">9</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">10</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">11</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">12</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">13</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">14</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">15</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">16</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">17</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">18</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">19</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">20</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">21</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">22</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">23</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">24</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">25</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">26</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">27</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">28</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">29</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">30</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">31</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">32</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">33</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">34</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">35</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">36</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">37</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">38</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">39</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">40</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">41</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">42</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">43</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">44</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">45</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">46</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">47</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">48</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">49</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">50</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">51</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">52</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">53</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">54</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">55</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">56</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">57</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">58</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">59</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">60</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">61</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">62</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">63</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">64</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">65</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">66</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">67</font>
</font>
</font>
</p>
<p style="margin-bottom: 0in; line-height: 100%">
<font color="#000000">
<font face="Arial, serif">
<font size="2" style="font-size: 10pt">68</font>
</font>
</font>
</p>
</div>
</body>
</html>推荐阅读
- date - 为什么时区包括位置？
- javascript - 推送对象后Nodejs数组仍然为空
- swift - 反向地理编码器的问题以及在视图控制器 Xcode 之间传递数据
- java - 如何使用 JsonFormat 格式化日期
- payment-gateway - Apple Pay - 处理付款
- react-native - React Native：刷新控件不适用于 ScrollView
- javascript - 如何使用 facebook SDK 在 laravel 中获取 fb 帐户图片库
- python - 基于现有列的熊猫多索引数据框中的新列
- apache-spark - Spark Structured Streaming 中的委托令牌负续订时间
- google-schemas - Gmail 标记 - 发票