Question

我试图在单个段落中使用不同跨度的ltr和rtl内容。它导致根据rtl对齐段落中的整个内容。例如，如果我的第一个跨度是rtl而第二个跨度是ltr，那么它最终会出现第一个跨度，第一个跨度出现在最后一个跨度中。

在下面的代码片段中，您会看到第一个列表组时间首先出现，应该显示为第二个，如下一组所示。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>List Group With Custom Content</h2>
    <div class="list-group">
      <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">First List Group Item Heading</h4>
        <p class="list-group-item-text"><span>الفاتحہ.</span><span>0:11</span>
        </p>
      </a>
      <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
        <p class="list-group-item-text"><span>Fatiha</span><span>0:11</span>
        </p>
      </a>
    </div>
  </div>

</body>

</html>

Answer 1

问题在于p和span具有语言中立的方向性，因此如果p中没有强制ltr方向的元素，那么它只会采取自然方向整个内容的方向。

一种可能的解决方案是将每个span中的最后p更改为bdo，但我确信还有其他更优雅的。{/ p>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <h2>List Group With Custom Content</h2>
  <div class="list-group">
    <a href="#" class="list-group-item active">
      <h4 class="list-group-item-heading">First List Group Item Heading</h4>
      <p class="list-group-item-text"><span>الفاتحہ.</span><bdo dir="ltr">0:11</bdo>
      </p>
    </a>
    <a href="#" class="list-group-item">
      <h4 class="list-group-item-heading">Second List Group Item Heading</h4>
      <p class="list-group-item-text"><span>Fatiha</span><bdo dir="ltr">0:11</bdo>
      </p>
    </a>
  </div>
</div>

段落中混合的ltr和rtl

1 个答案: