jquery-以特定长度剪切字符串并将字符左移到下一行

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，则文本将从图像中用完。 我想知道，无论如何我可以将背景图像设置为适合文本长度吗？ （根据文字拉短或拉长）

更新 嗨，我发现只使用 p 标签并设置一些边框和背景颜色作为标签会更容易。由于标签会根据里面的文字自动展开，因此不再存在大小问题。但是，由于我的橱柜图像可能彼此非常接近（紧挨着），所以我会遇到所有标签相互重叠的问题。我正在寻找一种方法（jquery n css 都可以）来剪切标签中的文本，以便将多余的字符放在下一行？？

这里确实需要帮助。感谢任何建议...

Answer 1

我正在寻找一种方法（jquery n css 都可以）来剪切文本中的文本 标签所以多余的字符应该放在下一行？？

试试word-wrap: break-word。

Answer 2

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

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

Answer 3

您可以使用“背景大小”属性。

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

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