伪类：first-letter除了display：block或position绝对不外

Question

我有一个问题，我想将第一个字母放在与文本分开的第一个原始字符中，似乎CSS无法识别display：block;。或位置：绝对为第一个字母的伪类。

注意：我不能在第一个字母中添加其他标签。

的HTML

<div class="some-word">
  Product
</div>

的CSS

.some-word:first-letter{
  font-size:30px;
  display:block; /**doesnt work**/
  position:absolute;/**doesnt work**/
}

那就是我想要达到的目标：

在此处输入图片说明

Answer 1

看一下规格：

使用:: first-letter伪元素，只能在包含选择器的CSS规则集的声明块内使用所有CSS属性的一小部分：

所有字体属性：字体，字体样式，字体功能设置，字距调整，字体语言覆盖，字体拉伸，字体合成，字体变化，字体变化替代，字体变化大写，字体变体东亚，字体变体连字，字体变体数字，字体变体位置，字体粗细，字体大小，字体大小调整，行高和字体族。
所有背景属性：背景颜色，背景图像，背景剪辑，背景来源，背景位置，背景重复，背景大小，背景附件和背景混合模式。
所有保证金属性：margin，margin-top，margin-right，margin-bottom，margin-left。
所有填充属性：padding，padding-top，padding-right，padding-bottom，padding-left。
所有边框属性：速记边框，边框样式，边框颜色，边框宽度，边框半径，边框图像和长手属性。
颜色属性
文字装饰，文字阴影，文字转换，字母间距，字间距（适当时），行高，文字装饰颜色，文字装饰线，文字装饰风格，框阴影，float，vertical-align（仅当float为none时）CSS属性。

由于此列表将来会扩展，因此建议您不要在声明块内使用任何其他属性，以使CSS适应未来的发展。

现在针对您的问题，如果您可以更改html结构，则可以span对第一个字母使用a 并根据需要设置其样式。例如：

.some-word span {
  font-size: 50px;
  position: relative;
  padding-right: 10px;
}

<div class="some-word">
  <span>P</span>roduct
</div>

Answer 2

找到两个解决方案

第一个解决方案添加到包装元素word-break:all; + 添加第一个字母 margin-right:100%; + 为单词容器添加一些宽度；

.some-word{
  overflow:hidden;
  width:70px;
  word-break: break-all; 
}

.some-word:first-letter{
  font-size:30px;
  margin-right:100%;  
}

第二个解决方案添加到第一个字母float:left; + 右边距：100%；+ 为单词容器添加一些宽度；

.some-word{
  overflow:hidden;
  width:70px;  
}

.some-word:first-letter{
  font-size:30px;
  margin-right:100%;  
  float:left;
}

从这里我可以继续，Alex Char，感谢您的帮助。