尝试在HTML中包含Object时的文本换行

时间:2015-01-29 16:55:56

标签: html css

我正在创建我的网站的移动版本,我想在版权信息,菜单等上使用包含 - 在页面之间相同的内容。在过去,我使用过SSI,但我的托管服务不再支持SSI。所以现在我想以这种形式使用Objects

<OBJECT data="copyright4.3s.html">
Warning: HTML File could not be included.
</OBJECT>

这是有效的,但我对所包含的html的显示方式的控制有限。例如,我希望包含的html以页面为中心,因此我发现我必须在主页面中创建居中div,然后将上面的代码放在该居中div中。另外,我发现我必须在包含的html的标题中包含文本格式,否则如果从主页引用它,它就不会看到文本格式。现在我的问题是包含的html文本是包装,我希望它在一行上。我不能为我的生活弄清楚文本为什么要包装。所以我的主要html和include html如下: 主要HTML:

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>

<title>Template</title>
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing:    border-box;
box-sizing:         border-box;
}
body,html {
margin:0;
padding:0;
}

/* Page Headline */
.title-headline{
width: 100%;
text-align: center;
vertical-align: middle;

}

.title-headline span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}

.title-headline h2 {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.7em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
/* END Page Headline */

.mob-p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:1.3em;
line-height:145%;
padding-right:1.8em;
padding-left:1.8em;
}

/* COPYRIGHT INCLUDE */

copyright-container{
right: 0;
bottom: 0;
left: 0;
padding: 0px;
text-align: center;
}

.copyright-container-div{
width:100%;
text-align: center;
background-color: #ffff99;
}

/* END COPYRIGHT INCLUDE */



/* FOOTER */

footer-container{
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 0px;
text-align: center;
}
.ad-footer {
right: 0;
bottom: 0;
left: 0;
padding: 10px;
background-color: #efefef;
text-align: center;
}
.ad-buffer{
margin-top:30px;
height:70px;
}

.nav-arrows-bottom{
width: 100%;
vertical-align: middle;
height:50px;
}
.nav-arrows-btm-left{
float:left;
padding:10px;
}

.nav-arrows-btm-right{
float:right;
padding:10px;
}
.nav-arrow-left {
width: 0; 
height: 0; 
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;

border-right: 20px solid green;
}
.nav-arrow-right {
width: 0; 
height: 0; 
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
.nav-arrows-pad{
width: 100%;
height:1em;
}

/* END FOOTER */

</style>
</head>
<body>

<div class="body-content">
<div class="title-headline">
<h2>Heading</h2>
</div>
<p class="mob-p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula    eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur    ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla   consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede     mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate    eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam   lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius    laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper    ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus,  sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel,    luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae   sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus   tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed  consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>  
<img style="float: right; margin: 0px 0px 15px 15px;" src="images/misc/contact_message.png"     width="100" />  
<p class="mob-p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula    eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur    ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla   consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.  In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede     mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate    eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam   lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius    laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper    ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus,  sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel,    luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae   sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus   tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed  consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>  

<hr align="center" width="50%">


<div class="copyright-container-div">
    <OBJECT data="copyright4.3s.html">
    Warning: HTML File could not be included.
    </OBJECT>
</div>

</div>

<footer-container>

<div class="nav-arrows-bottom">
    <div class="nav-arrows-btm-left">
    <div class="nav-arrow-left"></div>
    </div>
    <div class="nav-arrows-btm-right">
    <div class="nav-arrow-right"></div>
    </div>
</div>
<div class="nav-arrows-pad"></div>

<div class="ad-footer">
    I'm gonna put an ad in this space.
</div>
</footer-container>

</body>
</html>

包含的HTML:

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Copyright</title>
<style>

.copyright-container-inc-div{
width:100%;
text-align: center;
background-color: #ff0000;
}
p.copyright-include{
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="copyright-container-inc-div">
<p class="copyright-include">All website content &#169; copyright example.com All Rights    Reserved</p>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

object元素的默认大小为300 x 150像素。如果内容水平需要超过300个像素,则会强制包装内容。

一个简单的方法是在嵌入元素中使用以下CSS规则:

object { width: 100%; }

这也使您的容器元素与嵌入页面一样宽,因此红色背景在其上方延伸。如果您不想这样,则需要在嵌入页面中调整样式。