Question

我无法从包含一行的HTML设置效果，该行的居中文字会溢出行的宽度。下面是我尝试过的一个示例，我得到隐藏的文本，但只在行的右侧。有人可以告诉我这是否可能？

    <div id="div1" style="display:inline; position: absolute; top:108px; left: 28px; width:403px; height:74px; background-color:transparent; z-index: 2; border: solid 0px #000000; color: #000000; ">
      <table width="100%" height="100%" cellpadding="0" cellspacing="0" style="color: #000000; font-family: Microsoft Sans Serif; font-size: 8.25pt; table-layout:fixed; ">
          <tr>
              <td id="tsp1" valign="middle" nowrap="nowrap"><div style="height:100%; text-align:center; overflow:hidden;">This is a test of the text subpanel wrapping capabilities or lack there of in the thick client versus the web client.</div></td>
          </tr>
      </table>
    </div>

Answer 1

这是一个“脏”方法：

<html>
<head>
<title>Your Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    <!--
    function setCentered()
    {
        currString=$("#target").text();
        if(currString.length>16)
        {
            //magic equation
            amount=(currString.length-16);
            $("#target").css("margin-left","-"+amount.toString()+"px");
        }
    }
    // -->
</script>
<head>
<body onLoad="javascript:setCentered()">
    <div id="div1" style=" display:inline; position: absolute; top:108px; left: 28px; width:80px; height:74px; background-color:transparent; z-index: 2; border: solid 2px red; color: #000000; ">
        <table width="100%" height="100%" cellpadding="0" cellspacing="0" style="color: #000000; font-family: Microsoft Sans Serif; font-size: 8.25pt; table-layout:fixed; ">
            <tr>
                <td id="tsp1" valign="middle" nowrap="nowrap" style="text-align:center; overflow:hidden;"><p id="target">Space test #122 of totalling.</p></td>
            </tr>
        </table>
    </div>
</body>
</html>

请记住，考虑到各种字体和显示设置，您必须改进 js-code中的魔术等式。

隐藏HTML表格中的溢出居中文本

1 个答案: