计算元素在<p> </p>中的位置

Question

是否可以计算元素是否位于<p>内的新行的开头？例如，看一下这个截图：

你会看到Twitter按钮有一点点差距。这很好，当它跟着一个词，但我想知道是否有一个隐藏的CSS宝石，允许我说“如果你是第一个'东西'在一条线上然后失去你的边缘左。”

Answer 1

修改：答案是p button:first-child或p > button，但都不起作用。见评论。

您可能希望始终将边距设置为0，然后确保按钮始终有空格。 （编辑：赢了也工作，因为空间不够。再看看评论。）

Answer 2

可以使用JavaScript以编程方式进行此计算，但我不知道任何可以为您执行此操作的CSS技巧。

执行此操作的基本JavaScript算法是使用与文本段落相同的文本样式将不可见节点附加到文档。然后逐渐向其添加文本，在每次添加后检查其宽度以查看换行符的位置。然后当你弄清楚最后一行的宽度是什么时，你检查一下这个宽度是否会将twitter按钮单独放在下一行，并适当更新CSS样式以删除边距。这需要对包含推特按钮的页面上的每个<p>进行。

这不是最直接的方法（实际上，Lister先生的解决方案更简单，并且只要边距不超过几个像素宽就能产生相似的效果），但它并不像听起来那么糟糕，无论是。

以下是一个例子：

http://jsfiddle.net/fBUnW/6/