css - 标签内的文本未显示？

Question

我想在我的图片下显示文本，但它不起作用。显示我的图像但不显示我的文字。

textarea出现，但没有文字，我无法点击并在上面书写。虽然如果我Ctrl+F它说有文字，但我看不到它们，也没有突出显示

<div id = "folderlist">
    <a href="">
        <image  src="${resource(dir: 'images', file:  'folderimg.png')}" width="100px" height="100px"/>
        <textarea class="captionText"placeholder="your default   text">please display some text</textarea>
    </a>
</div>

我的 CSS 如下:

#folderlist {
    font-size: 0;
    width: 1500px;
    margin: 20px auto;
    position: absolute;
    top: 21%;
    right: 8.1%;
    text-align: center;
}

#folderlist a {
    margin: 15px;
    border: 8px solid transparent;
    display: inline-block;
    opacity: .8;    
    color:black;
}

#folderlist a:hover {
    opacity: 1;
    border-color: red;
}

.captionText {
    display: block;
    position: relative;
    width: 100px;
    height: 20px;
    text-color:black;
    border: 2px solid red;
}

我通过删除 placeholder 尝试了不同的变体使用输入区域，甚至只使用 <p>标签。

如有任何帮助，我们将不胜感激。

我也试过以下方法:

<a style='text-decoration: none; color: orange;'>
    <img src="${resource(dir: 'images', file:  'folderimg.png')}" width="100px" height="100px">
    <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

Answer 1

问题出在

#folderlist {
    font-size: 0;
    width: 1500px;
    margin: 20px auto;
    position: absolute;
    top: 21%;
    right: 8.1%;
    text-align: center;
}

将 font-size 设置为 0 会使文本不可见 :)