Question

InnerText div不适合outer div Text如果我给InnerText div一个顶部偏移量它完全适合但我不能强调这个，因为整个html是在运行时使用C＃应用程序创建的，我无法找到发生这种情况的原因。请耐心等待我，因为我在html和Css中完全是noob。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My Title</title>
    <meta http-equiv='X-UA-Compatible' content='IE=9'/>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <style type='text/css'>body {background-color:#d4c3d4 ; overflow: hidden; }</style>     
</head>
<body>  
    <div id='text' style='height:110px;'>
        <div id='innerText' style='position:relative; left: 0px; top: 0px; white-space: nowrap'>
            <span class='article' style='padding-left:4px;'>
                <span style="font-size:110px">
                    <span style="color:#FF8C00">
                        <span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>                       
                    </span>
                </span> 
            </span>
        </div>
    </div>      
</body>

输出：

编辑：

我不能改变div的高度，因为它在LED中每个Pixel都很重要，并且增加它的高度会改变整个分辨率

Answer 1

请注意，外部div 的height: 110px和font-size:110px中的span会使一个父div 小于它包含的文字，

解决方案：

1-将height更改为更大的值或从样式中删除它。或

2-将font-size更改为更小的值

对于html的自动创建，我建议将innertext的大小缩小为：比如80px。

Answer 2

方法1：仅删除style=height:110px;我为您添加了边框，您会看到结果：

＆＃13;

body {background-color:#d4c3d4 ; overflow: hidden; }

＆＃13;

<div id='text' style='border: 1px solid red;'>
   <div id='innerText' style='position:relative; left: 0px; top: 0px; white-space: nowrap'>
        <span class='article' style='padding-left:4px;'>
            <span style="font-size:110px">
                <span style="color:#FF8C00">
                    <span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>                       
                    </span>
                </span> 
            </span>
    </div>
</div>

＆＃13;

方法2：使用min-height代替height：

＆＃13;

body {background-color:#d4c3d4 ; overflow: hidden; }

＆＃13;

<div id='text' style='min-height:110px;border: 1px solid red;'>
   <div id='innerText' style='position:relative; left: 0px; top: 0px; white-space: nowrap'>
        <span class='article' style='padding-left:4px;'>
            <span style="font-size:110px">
                <span style="color:#FF8C00">
                    <span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>                       
                    </span>
                </span> 
            </span>
    </div>
</div>

＆＃13;

Answer 3

body {background-color:#d4c3d4 ; overflow: hidden; }
#text {
border:thin black solid;
width:auto;
}

<div id='text' >
        <div id='innerText' style='position:relative; left: 0px; top: 0px;'>
            <span class='article' style='padding-left:4px;'>
                <span style="font-size:110px">
                    <span style="color:#FF8C00">
                        <span style="font-family:times new roman,times,serif">[Title] - [date] - [description]</span>                       
                    </span>
                </span> 
            </span>
        </div>
    </div>

这和你想要的一样吗？我删除了 white-space：nowrap;

你可以使用 white-space：break-word ，这样如果额外的内容不适合在同一行，那么额外的内容就会在新行中。

如何将内容融入Div容器中

3 个答案: