Question

我的文字跨越多行。第一行应该从左到右运行，但是任何不适合第一行的多余文本都应该是右对齐的。

这是我想要描述的内容（有3个两行段落）：

1. Lorem ipsum dolor sit amet, consectetur adipiscing    |
                                                    elit.|
2. Sed do eiusmod tempor incididunt ut labore et dolore  |
                                            magna aliqua.|
3. Ut enim ad minim veniam, quis nostrud exercitation ul-|
                     lamco laboris nisi ut aliquip ex ea.|

我尝试过这个简单的解决方案：

div {
  text-align: right;
}

div::first-line {
  text-align: left;
}

但这不起作用。强制将块显示到第一行 - div::first-line {display: block;} - 也无济于事。

将第一行或每隔一行关闭到一个单独的span或某些东西中，以便操作或使其全部预格式化的文本不是一种选择;它应该自动进行。

有没有办法用CSS实现这个目标？

Answer 1

如果您将每一行换行为单独的div，则可以使用text-align-last属性：

＆＃13;

div {
   text-align: left;
   text-align-last: right;
   margin-bottom:10px;
}

＆＃13;

<div>Fungus is common in temperate and tropical regions around the world. When young, it seems a puffball; in maturity, the outer layer of fruit body tissue splits open in a star shape, similar in appearance to the earthstars.</div>
<div>The fungus grows in mutual symbiosis with roots of various trees, especially in sandy soils. It can open up its rays to expose the spore sac in response to increased humidity</div>
<div>The rays have an irregularly cracked surface, while the spore case is pale brown and smooth with an irregular slit or tear at the top.</div>

＆＃13;

Answer 2

由于您的方法强制显示块，您可以使用text-indent尝试这种替代方法。

p {
  margin-left: 3em; 
  text-indent: -3em;
}

根据语法，它并没有完全对齐第一行文本后面的行，但我认为这可能是您试图实现的结果。

以下是代码段：

p { 
  text-align-last: right;
  margin-left: 3em; 
  text-indent: -3em 
 }

<p>I am a very long
sentence where my second line is longer.sentence where my second line is 
 longer. sentence where my second line is longer.sentence where my second line  is longer. sentence where my second line is longer.sentence where my second line  is longer. sentence where my second line is longer.sentence where my second line  is longer. sentence where my second line is longer.sentence where my second line  is longer. sentence where my second line is longer.</p>
<p>I am a very long
sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.sentence where my second line is longer.</p>

这是fiddle

在第一行后更改文本对齐

2 个答案: