Css 自定义颜色框标题（长标题及其位置）

请看这个例子

如何在弹出窗口下添加长标题？例如，添加3行，如下所示：

我们可以在标签的标题上加一行，我试图改变这种风格

#cboxTitle {
position: absolute;
bottom: -25px;
left: 0px;
text-align: center;
width: 100%;
font-weight: bold;
color: #7C7C7C;

}

---

通过添加高度或顶部：800px，标题DeisAppear

您是否尝试过使用此选项

#cboxTitle {
position: absolute;
bottom: -25px;
left: 0;
text-align: right; /* MODIFIED */
width: 600px; /* MODIFIED */
font-weight: bold;
color: #7C7C7C;
word-break: break-word; /* ADDED */
margin-right: 100px; /* ADDED */
margin-left: 100px;  /* ADDED */
}

这将允许2行文本

然后，为了给另一行留出更多的空间，从上面删除下面的CSS。（在此处使用“/*CSS*/”进行注释，以便保留代码！）下面的示例

/* bottom: -25px; */

在那之后，需要稍微摆弄一下才能移动“3张图中的3张”部分：）

---

希望这能有所帮助

此解决方案似乎对我有效：

$(document).bind('cbox_complete', function(){
    var cboxTitleHeight = $('#cboxTitle').height();
    var cboxContentHeight = $('#cboxContent').height();
    var cboxWrapperHeight = $('#cboxWrapper').height();
    var colorboxHeight = $('#colorbox').height();

    $('#cboxMiddleLeft, #cboxMiddleRight, #cboxContent').css('height', (cboxContentHeight + cboxTitleHeight) + 'px');
    $('#cboxWrapper').css('height', (cboxWrapperHeight + cboxTitleHeight) + 'px');
    $('#colorbox').css('height', (colorboxHeight + cboxTitleHeight) + 'px');
});

---

我也找到了这个解决方案，但似乎无法与v.1.5.x的colorbox配合使用。

您希望图片上有描述吗？如果是这样，您可以使用类似这样的内容是的，但不是简单的图像和描述，正如我所说，colorbox照片库中弹出窗口下的描述。是的，我尝试了word wrap:break word；单词break：打破一切；但是结果很糟糕，我需要一些更灵活的东西，当描述更长或者字体更大的时候呢。所以我想也许彩盒不适合这里。我需要这样的东西：@user3250818看看我做的其他修改，不仅仅是添加/修改了那部分代码Hanks Woolnut，是的，我测试了它，你的答案非常接近我想要的，但我需要在一行中添加摄影师姓名，所以我至少需要另外两行，当然这两行必须有理想的边距和样式，所以我认为我们需要更改标题的位置（我是指标题文本的容器，上面图像中的灰色部分）和高度，但我认为这在这里是不可能的。谢谢，很高兴我的回答对你有用：）@user3250818谢谢！这是我找到的最好的解决办法。但是，我有一个小问题，每次我创建一个新的颜色框时，它都会添加以前实例的所有$（'#cboxTitle'）。高度。我不明白colorbox在DOM中是如何工作的，因为我找不到以前的实例，但每次我启动一个新实例时，cboxTitle height都会添加以前的实例高度。。我添加了一个带有cboxTitle.height的警报，它的触发次数与色盒的触发次数一样多。。我试过：$（document.bind（'cbox#u cleanup'，function（）{$（'cboxTitle'）。而不是（':first'）。remove（）；}）；但是你没有使用最新版本的colorbox吗？您是否可以在代码操场（JSFiddle、CodePen、jsbin等）中复制这个问题？