幻灯片放映模式下的Tumblr照片标题被截断

时间:2014-04-26 14:06:39

标签: html css image tumblr caption

我对Tumblr上的主题有一个问题,叫做Brick。每当我发布照片集时,当我点击照片集时,在入口页面上会弹出一个灯箱,我可以点击图片。但是,我的字幕(描述越长,照片越大)被浏览器的边缘切断。

您可以在我上传的照片中看到它:http://i60.tinypic.com/xddwcx.png

我一直在寻找html和css的代码,但我不确定最好的方法是什么。是否有一个简单的解决方法来纠正tumblr编码中隐藏的溢出?非常感谢提前帮助解决此事!该网站为http://movementdetroitblog.tumblr.com,以下是我的照片代码。

{block:Photo}
    <div class="photo">

    {block:indexpage}
        <div class="photo-hover">

            <div class="captions">
                <a href="{permalink}">
                    <span>x</span> {Timeago}
                </a>
                <a href="{permalink}">
                    <span>f</span> {NoteCountWithLabel}
                </a>
            </div>

            <a href="{permalink}">
                <div class="overlay"></div>
            </a>

            <div class="larger-width"> 
                <img src="{PhotoURL-HighRes}"alt="{PhotoAlt}">
            </div>

            <div class="normal-width">
                <img src="{PhotoURL-500}"alt="{PhotoAlt}">
            </div>

        </div>
    {/block:indexpage}

    {block:permalinkpage}
        {LinkOpenTag}
            <img src="{PhotoURL-HighRes}"alt="{PhotoAlt}">
        {LinkCloseTag}
    {/block:permalinkpage}

    </div>
{/block:Photo}

{block:Photoset}
     <div class="photo">

        {block:indexpage}
            <div class="photo-hover">
                <div class="captions">
                    <a href="{permalink}">
                        <span>x</span> {Timeago}
                    </a>
                    <a href="{permalink}">
                        <span>f</span> {NoteCountWithLabel}
                    </a>
                    <a href="{permalink}">
                        <span>j</span> view photoset
                    </a>
                </div>
                <a href="{permalink}">
                    <div class="overlay"></div>
                </a>
                <div class="photoset">
                    {block:Photos}
                        <img src="{PhotoURL-500}" alt="{PhotoAlt}">
                    {/block:Photos}
                </div>
            </div>
        {/block:indexpage}

        {block:permalinkpage}
            <div class="center-element">
                <div class="responsive-level-1">
                    {Photoset-500}
                </div>
                <div class="responsive-level-2">
                    {Photoset-500}
                </div>
                <div class="responsive-level-3">
                    {Photoset-250}
                </div>
            </div>
        {/block:permalinkpage}

    </div>
{/block:Photoset}

0 个答案:

没有答案