Скрыть текст с переполнением в HTML-таблице - PullRequest
0 голосов
/ 12 октября 2011

У меня проблемы с настройкой аффекта из 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>

1 Ответ

0 голосов
/ 12 октября 2011

Это "грязный" способ сделать это:

<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-коде с учетом различных шрифтов и настроек отображения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...