Question

我正在建立一个网站，我已经在那里存储了一些联系人我接近非常接触的名字，我正试图得到第一个字母将其命名并放在靠近它的圆盘中，如上图所示：

可以用CSS制作吗？

我用字母类伪元素尝试它，但它对我没有用，有什么建议？

Answer 1

由于您存储了这些名称，因此当您提取这些名称时，您也可以提取每个单词/名称的第一个字母并将其存储在data- attribute中。

它比CSS更像是服务器端（或javascript）作业。

例如伪：

＆＃13;

SELECT RM_Materials.MaterialCode MatCode,
       RM_MRPAttributeDefinitions.ShortDescription ProcessArea,
       RM_MRPAttributes.AttributeValue AttValue
FROM   DMI_Manu32.dbo.RM_MRPAttributeDefinitions
       INNER JOIN (DMI_Manu32.dbo.RM_Materials
                   INNER JOIN DMI_Manu32.dbo.RM_MRPAttributes
                           ON (RM_Materials.MaterialUID = RM_MRPAttributes.MaterialUID)
                              AND (RM_Materials.InternalVersionNo = RM_MRPAttributes.MaterialVersionNo))
               ON RM_MRPAttributeDefinitions.MRPAttributeDefinitionsUID = RM_MRPAttributes.MRPAttributeDefinitionsUID
WHERE  RM_Materials.ActiveTF = 1
       AND RM_MRPAttributes.ActiveTF = 1
       AND "RM_MRPAttributeDefinitions"."ActiveTF" = 1
       AND "RM_Materials"."DeletedTF" = 0
       AND "RM_MRPAttributeDefinitions"."ShortDescription" = N'PRIMARY_MATERIAL'
       AND "RM_Materials".ActiveTF = 1
UNION
SELECT RM_Materials.MaterialCode MatCode,
       RM_MRPAttributeDefinitions.ShortDescription ProcessArea,
       RM_MRPAttributes.AttributeValue AttValue
FROM   DMI_Manu32.dbo.RM_MRPAttributeDefinitions
       INNER JOIN (DMI_Manu32.dbo.RM_Materials
                   INNER JOIN DMI_Manu32.dbo.RM_MRPAttributes
                           ON (RM_Materials.MaterialUID = RM_MRPAttributes.MaterialUID)
                              AND (RM_Materials.InternalVersionNo = RM_MRPAttributes.MaterialVersionNo))
               ON RM_MRPAttributeDefinitions.MRPAttributeDefinitionsUID = RM_MRPAttributes.MRPAttributeDefinitionsUID
WHERE  RM_Materials.ActiveTF = 1
       AND RM_MRPAttributes.ActiveTF = 1
       AND "RM_MRPAttributeDefinitions"."ActiveTF" = 1
       AND "RM_Materials"."DeletedTF" = 0
       AND "RM_MRPAttributeDefinitions"."ShortDescription" = N'SECONDARY_MATERIAL'
       AND "RM_Materials".ActiveTF = 1

＆＃13;

[data-letters]:before {
  content:attr(data-letters);
  display:inline-block;
  font-size:1em;
  width:2.5em;
  height:2.5em;
  line-height:2.5em;
  text-align:center;
  border-radius:50%;
  background:plum;
  vertical-align:middle;
  margin-right:1em;
  color:white;
  }

＆＃13;

Answer 2

这不能仅使用CSS完成，您至少需要修改一些HTML（或使用JS），让我解释一下：

HTML，添加标题属性：

<div class="my-circle" title="KM"></div>
<div class="name">Kwstas Mixopoulos</div>

CSS：

.my-circle {
    content: attr(title);
}

但只有CSS，您才能从元素文本节点获得第一个字母，并将其放在内容属性中。

如果您无法修改HTML，则必须使用基于JS的解决方案。

Answer 3

我假设您有权访问名字和姓氏。使用该代码，我编写了这段代码，该代码将从“名”和“姓”中提取第一个字母并应用于您的个人资料图像。

$(document).ready(function(){
  var firstName = $('#firstName').text();
  var lastName = $('#lastName').text();
  var intials = $('#firstName').text().charAt(0) + $('#lastName').text().charAt(0);
  var profileImage = $('#profileImage').text(intials);
});



#profileImage {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #512DA8;
  font-size: 35px;
  color: #fff;
  text-align: center;
  line-height: 150px;
  margin: 20px 0;
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="firstName">King</span>
<span id="lastName">Singh</span>
<div id="profileImage"></div>

Answer 4

Here是执行此操作的另一种方法，尽管上面建议的某些答案很短，但我修改了上面评论中给出的链接。对于初学者来说，这种方法非常基础且易于理解：

$('h1').each(function() {
  var str = $(this).text();
  var matches = str.match(/\b(\w)/g);
  
  var acronym = matches.join('');
  
  $(this).prepend('<span><i>' + acronym + '</i></span>');
  
})

* {
  box-sizing: border-box;
}

h1 {
  font-size: 24px;
  margin: 15px 0;
}

h1 span {
  background: rgba(155, 79, 243, 0.74);
  text-transform: uppercase;
  font-family: "Lucida Console";
  align-items:center;
  color: rgba(233, 236, 237, 0.78);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  font-size: 16px;
  padding: 5px;
  vertical-align: middle;
  margin: 0 10px 0 0;
}
h1 span i{
  width:max-content;
  font-style: normal;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h1>Morbi metus</h1>
<h1>yorbi fasetus</h1>
<h1>test tessdfa</h1>

CSS放在名称的圆圈第一个字母中

4 个答案: