Html 这些奇怪的断线是什么？

我不明白为什么我的文字会在奇怪的地方断裂。没有影响换行或显示的CSS。我已经把它缩小到下面的代码引起的问题。（参见HTML和CSS）。我非常确定intro-serv-div文本正在中断，因为它正在包装横幅文本容器的一部分，但不确定如何绕过它。再次感谢您提供的一切帮助

（此处示例图像：这是dreamweaver的屏幕截图）

这是我的密码：

div#横幅文本{
背景色：rgba（2182182180.6）；
颜色：黑色；
颜色：#黑色！重要；
文本转换：大写；
字体大小：2.45em！重要；
字体系列：'Pathway Gothic One'，无衬线；
浮动：对；
不透明度：1；
填充：10px；
宽度：470px；
z指数：2；
位置：相对位置；
顶部：-80px；
字号：700；
字母间距：0em；
字距：0em；
线高：1.2；
}
p、 p-serv{
背景颜色：粉红色；
}
正文部分{
宽度：968px；
高度：自动；
利润率：24px自动10px；
填充：0；
}
单分区{
填充：20px44px44px44px；
边框：1px实心#d1d3d4；
盒影：0px 2px 5px#2B2727；
}
身体{
保证金：0；
填充：0；
字体大小：12px；
字体系列：Arial、Helvetica、无衬线字体；
背景图片：url（'../img/BackgroundMain_02.jpg'）；
背景重复：重复-x；
线高：20px；
"
}
部门简介服务{
背景颜色：绿色；
}

HP Indigo 10000 Press为您提供数百种应用的颜色、纸张尺寸和基板选项
span#ctl00_ctl00_cpMainBody_cpMainContent_pageTitle.SubHeader{
显示：无；
}
横幅文本
简介培根同色多洛尔·阿梅特·西勒姆·图尔达肯·洛雷姆·德雷姆·德雷姆、肉排鹿肉、德雷姆·莫利特肉排、德雷姆·卡皮科拉肉排、查克·乔尔·基尔巴萨·里贝耶肉干、圣洛雷姆·帕斯特拉米肉干、基尔巴萨侧翼非牛肉肉排、乌兰科牛腩
牛腰肉、火腿、曲奇肉饼、排骨、短排骨除外
您可能需要从营销材料（如名片和宣传册）到内部表格和培训出版物（如研讨会手册）的一切。随着印刷材料的多样性，印刷材料的数量、颜色和基材也各不相同
要求。我们的HP Indigo 10000可以满足所有要求

试着将文本包装成一个

文本放在这里

。我发现它可以帮助解决这样的格式问题。当然，我觉得如果没有额外的代码，我不知道整个故事的来龙去脉，看看还有什么会影响它。

我找到了答案：banner text div导致intro serv div因有点飘浮

我补充说

margin-bottom: -100px;

到

div#横幅文本{

属性，解决了换行问题。完整更新代码如下：

HTML：与原文相同

CSS:

div#banner-text {
    background-color: rgba(218,218,218, 0.6);    color: black;
    color: #black !important;
    text-transform: uppercase;
    font-size: 2.45em !important;
    font-family: 'Pathway Gothic One', sans-serif;
    float: right;
    opacity: 1;
    padding: 10px;
    margin: 0;
    margin-bottom: -100px;
    width: 470px;
    z-index: 2;
    position: relative;
    top: -80px;
    font-weight: 700;
    letter-spacing: 0em;
    word-spacing: 0em;
    line-height: 1.2;
}

---

感谢所有回复者。

请在您的问题中发布完整的代码示例。可能是div的浮点阻塞部分，但没有代码就无法分辨。此外，指向JSFIDLE的链接总是比指向实时站点的链接更可取。提供的链接甚至不是实时站点，但只是其中一个的屏幕截图。上述代码工作正常。..pl请提供指向您网站的链接或发布完整的代码。这是wordpress网站吗？这需要大量的代码。很可能是这些代码中的某些内容导致了这种情况。您可能需要将代码缩减到影响此文本的元素，以便更好地了解问题。否则，有了这么多的代码，我们可能会陷入困境黑暗的。