Question

我的客户正在请求一个网站，其中的段落水平居中，诗句写在一个狭窄的列中。此列应根据行上单词的长度更改宽度。

实际上，文本占据的字母的艺术写入宽度应确定列的宽度，因此每个页面看起来都居中。每首诗（因此，每页）每行可以有不同数量的字符。这可能吗？

IE： “玛丽有只小羊羔小羊羔，小羊羔，玛丽有只小羊羔，它的羊毛像雪一样白“＆lt; - div应该只有诗歌中最长的文字宽度（这里是最后一行），并且应该是灵活的，取决于是否添加或删除文字，或者使用了不同的字体。

我试图用inline-flex设置这个：

.one {
    background: grey;
    display: inline-flex;
    margin: 0 auto;
}
p {
    overflow: hidden;
    white-space: nowrap;
}
.centered {
    text-align: center;
}

<div class="centered">
    <div class="one">
       <p>Here is some text for div 1 depending on the size of the div.</p>
    </div>
</div>

代码：https://codepen.io/Clare12345/pen/rzRNmK

但我遇到的问题是，一些段落（即诗中的行）彼此相邻而不是一个在另一个之上。 clear:both没有用。

有什么想法吗？

编辑：以下是正在发生的事情的屏幕截图：https://www.dropbox.com/s/kxtiuuiptstes1i/Screen%20Shot%202017-09-03%20at%2010.11.24%20AM.png?dl=0

编辑2：下面的答案几乎是正确的。这是正在运行的CSS代码：（该网站使用的是WordPress，而.centered div位于.entry div内。）

.postid-85 .entry {
text-align: center; 
}
.centered {
display: inline;
}
.one {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
.one p {
text-align: left; 
}

很抱歉所有的修改。它现在正在运作！

Answer 1

using CoreGraphics;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(MobileCatalog.LmcContentView), typeof(MobileCatalog.iOS.LmcContentViewRenderer))]

namespace MobileCatalog.iOS
{
    /** Custom renderer in iOS is needed for the Overlay Content View:
     * otherwise the "overlay" tap recognizer block taps inside its content */

    public class LmcContentViewRenderer : VisualElementRenderer<ContentView>
    {
        public LmcContentViewRenderer()
        {
            UITapGestureRecognizer recognizer = new UITapGestureRecognizer((g) =>
            {
                if (Element != null)
                    LmcApp.W.ThePage.Overlay_Tapped(Element, null);
            });

            recognizer.ShouldBegin = ((g) =>
            {
                CGPoint point = g.LocationInView(this);
                UIView viewWithPoint = HitTest(point, null);
                return viewWithPoint != null && viewWithPoint.Frame.Size.Equals(Frame.Size);
            });

            AddGestureRecognizer(recognizer);
        }
    }
}

是否可以根据行上文本的长度减小div的宽度？

1 个答案: