中括号如何和第二行文本内容对齐？

Question

问题描述

‘【】’如何和下面的内容对齐呢

问题出现的环境背景及自己尝试过哪些方法

自己使用margin-left:-12px可以 但是想了解一下有没有其他更好的方法解决

相关代码

粘贴代码文本（请勿用截图）

    <div>【内容】内容</div>
    <div>内容内容</div>

Answer 1

主要是中文符号的问题，第二行可以用 text-indent 来进行缩进。

当然也可以让第一行负缩进，比如 text-indent:-10px，但如果这个 【 符号并不是每一次都会出现的话，就需要用到伪类选择器来实现了。

Answer 2

你这个写法没问题的。

如果你觉得用像素不准确，那么你可以试试在第二行也放一个中括号，然后隐藏起来。
当然得保证样式是跟上面一样的。

另外我想确定一个问题，你能保证上面的div都是以中括号开头的吗？

Answer 3

中文符号占两个标准字符位置，把发布时间那一行加上一个字符的占位就好了

#content::before {
  content: "a";
  visibility: hidden;
  font-size: 标题的字号
}

Answer 4

字体大小、所用字体都会影响它的表现形式，所以写死12px是不太对的。

如果每行的前缀都是【商城规则】，那么可以把这个提取出来，中括号用css背景色来实现，或者在图表库自制中括号的字体进行替换

如果并不是每行的前缀都是这个，那不好处理，建议不作处理