如何在 CSS 中获得内部文本的确切宽度？

Posted 2023-03-06

【中文标题】如何在 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>