如何在 CSS 中获得内部文本的确切宽度?
Posted
技术标签:
【中文标题】如何在 CSS 中获得内部文本的确切宽度?【英文标题】:How do I get the exact width of the inner text in CSS? 【发布时间】:2020-04-21 17:24:30 【问题描述】:您好,我需要知道 CSS 中内部文本的确切宽度。正如您在图像中看到的,我希望这些菜单项分别具有适当的宽度,不包括填充或边距,这样我就可以给它们一个悬停效果,如“帖子”项。有什么方法可以用来获取内部文本的宽度吗?
/* Basic settings */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,700&display=swap');
*
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all .3s;
color: #333;
a
text-decoration: none;
color: inherit;
li
list-style-type: none;
img
border: 0;
html, body
height: 100%;
body
font-family: "Roboto", Helvetica, sans-serif;
/* Main */
body
background-color: whitesmoke;
header
border-bottom: 1px solid #EEE;
height: 70px;
overflow: hidden;
background-color: white;
header > div
vertical-align: middle;
header > #logo
width: 15%;
padding: 20px;
border-right: 1px solid #EEE;
text-align: right;
display: inline-block;
header > #logo img
width: 30px;
height: auto;
header > #search
border-right: 1px solid #EEE;
width: 200px;
display: inline-block;
padding: 20px;
header > #search input
border: 0;
outline: 0;
display: inline-block;
width: 80%;
vertical-align: middle;
padding-left: 10px;
header > #search a
font-size: 1.2rem;
display: inline-block;
vertical-align: middle;
width: 20%;
header > #search > #search-box
border: 1px solid #CCC;
border-radius: 100px;
overflow: hidden;
header > #gnb
height: 70px;
display: inline-block;
vertical-align: middle;
border-right: 1px solid #EEE;
header > #gnb ul
margin: 0 30px;
line-height: 70px;
header > #gnb li
display: inline-block;
header > #gnb li:not(:last-child)
margin-right: 20px;
header > #gnb a
display: inline-block;
font-weight: lighter;
header > #gnb a:hover
transform: translateY(-5px);
.premium
color: orangered;
#social-media-icons
display: inline-block;
vertical-align: middle;
border-right: 1px solid #EEE;
height: 70px;
#social-media-icons ul
padding: 0 20px;
line-height: 70px;
#social-media-icons li
display: inline-block;
#social-media-icons li:not(:last-child)
margin-right: 15px;
#social-media-icons li a
font-size: 2rem;
display: inline-block;
#social-media-icons li a:hover
transform: translateY(-5px);
#profile
display: inline-block;
vertical-align: middle;
#profile a
margin-left: 20px;
#profile a img
width: 50px;
height: 50px;
border-radius: 50%;
#sub-header
border-bottom: 1px solid #EEE;
height: 50px;
background-color: white;
#sub-header ul
width: 800px;
margin: 0 auto;
#sub-header li
line-height: 47px;
display: inline-block;
border-bottom: 3px solid transparent;
padding: 0 20px;
#sub-header li:hover
border-bottom: 3px solid cornflowerblue !important;
#sub-header a
text-align: center;
display: inline-block;
width: 100%;
.selected
border-bottom: 3px solid cornflowerblue !important;
main
width: 1000px;
margin: 30px auto;
aside
width: 200px;
background-color: white;
#bill-gates
padding: 20px;
border-bottom: 1px solid #EEE;
#bill-gates-image
margin-bottom: 20px;
#bill-gates-image > img
margin: 0 auto;
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
#bill-gates-bio
text-align: center;
margin-bottom: 30px;
#bill-gates-bio > h2
margin-bottom: 5px;
#bill-gates-bio > p
font-weight: lighter;
margin-bottom: 3px;
#bill-gates-bio > p:last-child
color: #CCC;
#bill-gates-follow-button
text-align: center;
margin-bottom: 10px;
#bill-gates-follow-button > a
display: inline-block;
line-height: 20px;
padding: 10px 50px;
background-color: cornflowerblue;
color: white;
border-radius: 30px;
border: 1px solid transparent;
#bill-gates-follow-button > a:hover
background-color: rgb(70, 134, 253);
#bill-gates-connect-button
text-align: center;
#bill-gates-connect-button > a
line-height: 20px;
display: inline-block;
padding: 10px 40px;
background-color: white;
color: cornflowerblue;
border: 1px solid cornflowerblue;
border-radius: 30px;
#bill-gates-connect-button > a:hover
background-color: #EEE;
#aside-middle
overflow: hidden;
border-bottom: 1px solid #EEE;
height: 80px;
#connections
text-align: center;
float: left;
width: 50%;
height: 100%;
border-right: 1px solid #EEE;
#followers
text-align: center;
float: right;
width: 50%;
height: 100%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Bill Gates</title>
</head>
<body>
<header>
<div id="logo">
<a href="#">
<img src="./img/logo.png" >
</a>
</div><!--
--><div id="search">
<div id="search-box">
<input type="search" name="search" placeholder="Search"><!--
--><a href="#">????</a>
</div>
</div><!--
--><div id="gnb">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Profile</a>
</li>
<li>
<a href="#">Connections</a>
</li>
<li>
<a href="#">Interest</a>
</li>
<li class="premium">
<a href="#">Try Premium</a>
</li>
</ul>
</div><!--
--><div id="social-media-icons">
<ul>
<li>
<a href="#">????</a>
</li>
<li>
<a href="#">????</a>
</li>
<li>
<a href="#">➕</a>
</li>
</ul>
</div><!--
--><div id="profile">
<a href="#">
<img src="./img/avatar.jpg" >
</a>
</div>
</header>
<div id="sub-header">
<ul>
<li class="selected">
<a href="#">Posts</a>
</li><li>
<a href="#">Background</a>
</li><li>
<a href="#">Recommendations</a>
</li><li>
<a href="#">Following</a>
</li>
</ul>
</div>
<main>
<aside>
<div id="bill-gates">
<div id="bill-gates-image">
<img src="./img/bill-gates-avatar.png" >
</div>
<div id="bill-gates-bio">
<h2>Bill Gates</h2>
<p>Microsoft Founder</p>
<p>Greater Seattle Area</p>
</div>
<div id="bill-gates-follow-button">
<a href="#">Follow</a>
</div>
<div id="bill-gates-connect-button">
<a href="#">Connect ↓</a>
</div>
</div>
<div id="aside-middle">
<div id="connections">
<h3>200</h3>
<p>connections</p>
</div>
<div id="followers">
<h3>1.9M</h3>
<p>followers</p>
</div>
</div>
</aside>
</main>
</body>
</html>
【问题讨论】:
也许这会回答你的问题:Width equal to content. 谢谢。但我不想得到内部文本本身的确切宽度,我想在两边都给它一个额外的宽度 10px。 是否可以用 span 标签换行?在您目前的结构中? 是的。使用span标签有什么好的方法吗? 你能在sn-p中分享你的代码吗? 【参考方案1】:使用元素的width
属性,获取内容区域的宽度,不包括任何填充、边框或边距。
.bg-tag
font-family: Arial, sans-serif;
font-size: 14px;
text-decoration: none;
.bg-tag:focus
padding-bottom: 2px;
border-bottom: 2px solid #000; #change colour as you like
width: 100%;
<a href="#" class="bg-tag">Background</a>
【讨论】:
以上是关于如何在 CSS 中获得内部文本的确切宽度?的主要内容,如果未能解决你的问题,请参考以下文章