javascript - 如何动态更改链接的行高或字体大小(<a>)？

Question

这是我的元素的样子:

每个红框都是一个链接。现在我将它们作为标签，其行高与框的高度相匹配，以便文本垂直居中。我遇到的问题是需要放在图 block 上的文本太长。如果文本太长，我怎样才能使文本换行？有没有办法确定字符串是否适合特定宽度？

改变我设置磁贴的方式会让这更容易吗？我考虑过让 Divs 可点击，但我仍然不确定如何使文本在中心垂直对齐。我只需要指向正确的方向。谢谢

编辑:一些代码

tile 的 html:

<div class="primary col_1 row_1">
    <a href="javascript:expand(1, 1)">
        <?php echo $tile_data[0][0]; ?>
    </a>
</div>

适用的CSS:

#selection_menu a {
    color: #FFFFFF;
    width: 162px;
    text-decoration: none;
    font-weight: bold;
    display: block;
    border: none;
    float: left;
}
#selection_menu .primary_options .primary a { font-size: 23px; height: 108px; }

Answer 1

考虑以下因素(添加适当的颜色和排版):

#selection_menu div a {
    display: table-cell;
    height: 108px;
    text-align: center;
    vertical-align: middle;
    width: 162px
}

这将使 div 内的每个 a 垂直居中(在 #selection_menu 内)，无论它跨越多少行。适用于所有现代 Web 浏览器。您可以将 line-height 设置为适当的值，例如 1.5(它将定义链接跨越多行时的外观)。