Question

我有一个p标签，作为我的图像的名称标签：

        string output = "";
        output += "<p id=\"" + container.ContainerID +"\">" + container.ContainerName + "</p>";
        return output;

我把标签的背景图片放在css：

中

 p
 {
    background-position: center;
    text-align: center;
    background-image: url('Add_in_Images/label.png');
    background-repeat: no-repeat;
}

但我面临的问题是文本长度与图像不匹配，例如，如果我的名称为large_cabinet_1，则文本将从图像中用完。我想知道，无论如何我可以设置背景图像以适应文本长度？（根据文字拉伸更短或更长）

UPDATE 嗨，我发现只使用p标签并设置一些边框和背景颜色作为标签会更容易。由于标签根据文本内部自动展开，因此尺寸问题不再存在。但是，由于我的橱柜图像可能彼此非常接近（紧挨着），所以我会遇到所有标签彼此重叠的问题。我找到一种方法（jquery n css都很好）来剪切标签中的文字，这样就应该将额外的字符放到下一行？

这里真的需要帮助..感谢任何建议......

Answer 1

我找到了一种方法（jquery n css都很好）来剪切文本标签所以额外的字符应该放到下一行??

尝试word-wrap: break-word。

Answer 2

答案很简单：在css中，你不能拉伸背景图像。你必须找到一个不同的解决方案，但很难说没有看到图像是最好的。如果它像按钮一样，你可以看看sliding doors css。

或者，您可以将图像嵌入<img> - 标记并使用javascript将其移动并拉伸到与标签相同的位置和尺寸。如果图像上的z-index低于标签上的z-index，则“看起来像”背景图像。

Answer 3

您可以使用“background-size”属性。

jsFiddle：http://jsfiddle.net/2w4BP/

但是，请注意，所有浏览器都不支持background-size属性，并且在Opera等浏览器（它本应支持它）中有时看起来相当不稳定。

jquery-以特定长度剪切字符串并将字符留给下一行

3 个答案: