为什么在 <span> 元素后出现换行符答案

【问题标题】：Why do I get a line break after a <span> element为什么在 <span> 元素后出现换行符
【发布时间】：2015-04-14 19:29:50
【问题描述】：

为什么会出现换行符？我使用以下内容： White-space: nowrap;但是当我填写跨度时，会出现换行符。这是什么原因造成的？

function insertLinkHoverImage(datei,datei2,verlinkung) 
        {
            var doc = document.getElementById("frame").contentWindow.document;

            var range = doc.getSelection().getRangeAt(0);
            var nnode = doc.createElement("span");
            var width = 0;
            var height = 0;

            var image = doc.createElement("img");
            image.src = "http://www.galliano.cc/Test_seite/cms/uploads/"+datei;         
            //Wenn Bild hochgeladen wurde
            image.onload = function() {
                document.getElementById("imgwidth").value = image.width;
                document.getElementById("imgheight").value = image.height;


                var alink = doc.createElement("a");
                var classDatei2 = "";

                alink.href = verlinkung;
                classDatei2 = datei.replace(".","-");

                nnode.setAttribute("style","white-space: nowrap; background-image:url(http://www.galliano.cc/Test_seite/cms/uploads/"+datei+"); width:"+document.getElementById("imgwidth").value+"px; height: "+document.getElementById("imgheight").value+"px; display: block; background-repeat: no-repeat;");               

                alink.appendChild(nnode);
                range.insertNode(alink);
            }

        }

【问题讨论】：

当我插入跨度时，我在插入后得到一个
。因此图像与其他单词不在同一行。

标签： javascript html css nowrap

【解决方案1】：

如果你看看你的 JavaScript，你有：

var nnode = doc.createElement("span");

然后你有：

nnode.setAttribute("style","white-space: nowrap; 
background-image:url(...);     
width:"+document.getElementById("imgwidth").value+"px; 
height: "+document.getElementById("imgheight").value+"px; 
display: block; background-repeat: no-repeat;");

所以span默认是一个内联元素，但是你在你的内联样式中指定display: block，这使它成为一个块级元素，这将给你你的换行符。

尝试使用display: inline-block。

【讨论】：