Question

我具有以下功能，如果单击了标签，该功能会在location = "Fort Neugrad" -- the player starts in Fort Neugrad first currentDirection = North -- the player faces north at first data Direction = North | East | South | West deriving(Show, Eq, Enum) data Movement = TurnLeft | TurnRight | Advance | BackOff deriving(Show) type Location = String type GameMap = [((Location, Direction), Location)] -- First location is the current location, second is the next location where the direction points to(Ive made a map but its to large to post it) --move :: Movement -> Direction -> Location --move m = case m of TurnLeft -> pred currentDirection -- TurnRight -> succ currentDirection -- Advance -> -- BackOff -> filterAccess :: Location -> [Location] filterAccess l = [ c | ((a,b), c) <- wonderland, a == l ]标签内扩展单词包装的文本。

tr

我正在使用此功能，因为我希望表格单元格中的文本仅显示在一行上（本质上是隐藏内部$(document).ready(function () { $('tr').click(function () { var $this = $(this); if($this.css('white-space') === 'nowrap') { $this.css('white-space', 'normal'); } else { $this.css('white-space', 'nowrap'); } }); });标记），直到用户单击为止。但是，问题是p中断了nowrap和br标签的行，而我出于格式化目的有几行。仅当单击p时，才能打开这些标签？

html：

tr

Answer 1

您可以在div中添加最大高度（相对于字体大小，默认高度为1.2em），并设置overflow: hidden。然后，您只会看到1行。单击后，切换设置overflow: visible和height: auto的另一个类。

$(document).ready(function() {
  $('tr').click(function() {
    var $this = $(this);
    $(this).find(".a").toggleClass("expand");
  });
});

.a{
  height: 1.2em;
  overflow: hidden;
}

.expand{
  height: auto;
  overflow: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div class="a">
        {{ post.person }}
        <p>
          Message:
          <br> {{ post.message }}
        </p>
      </div>
    </td>
  </tr>
</table>

忽略div中的标签，直到单击为止

1 个答案: