CSS 放在圆圈中名字的第一个字母
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34310271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS place in circle first letter of the name
提问by pureofpure
i am making a websites were i have stored some contacts there and i near very contact name i am trying to get the first letter ot that name and place it in a circle board near it like in the image above:
我正在制作一个网站，如果我在那里存储了一些联系人，并且我接近联系人姓名，我正在尝试获取该名称的第一个字母并将其放置在它附近的圆板上，如上图所示：
it is possible to make it with CSS?
可以用 CSS 来实现吗？
I try it with letter class pseudo element but it didnt worked for me , any suggestions ?
我尝试使用字母类伪元素，但它对我不起作用，有什么建议吗？
回答by G-Cyrillus
Since you stored those names, then when you extract them you can as well extract first-letter of each words/names and store them in a data- attribute.
由于您存储了这些名称，因此在提取它们时，您还可以提取每个单词/名称的首字母并将它们存储在数据属性中。
It is more a server-side (or javascript) job than CSS.
它比 CSS 更像是服务器端（或 javascript）的工作。
exemple with pseudo:
伪示例：
[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;
}<p data-letters="MN"> My Name</p><!-- or whatever structure you used -->回答by enguerranws
This can't be done ONLY with CSS, you'll need to modify some HTML at least (or use JS), let me explain :
这不能仅使用 CSS 来完成，您至少需要修改一些 HTML（或使用 JS），让我解释一下：
HTML, adding a title attribute :
HTML，添加标题属性：
<div class="my-circle" title="KM"></div>
<div class="name">Kwstas Mixopoulos</div>
CSS :
CSS :
.my-circle {
content: attr(title);
}
But only with CSS, you can't have first letters from an element text node and put it in a content property.
但仅使用 CSS，您不能将元素文本节点的首字母放入内容属性中。
If you can't modify HTML, you'll have to use a JS based solution.
如果您无法修改 HTML，则必须使用基于 JS 的解决方案。
回答by Asad
I have assumed that you have access to the first name and last name. Using that, I have written this code which will take the first letter from First name and last name and apply to your profile image.
我假设您可以访问名字和姓氏。使用它，我编写了此代码，它将从名字和姓氏中获取第一个字母并应用于您的个人资料图片。
$(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>
回答by Code_Ninja
Hereis another way of doing this, I have modified a link given in a comment above, although some of the answers suggested above are quite shorter. This approach is very basic and simple to understand for beginners:
这是另一种方法，我修改了上面评论中给出的链接，尽管上面建议的一些答案很短。对于初学者来说，这种方法非常基本且易于理解：
$('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>