gpt4 book ai didi

html - 有没有办法只使用 css 或 html 使文本填充按钮大小?

转载 作者:太空宇宙 更新时间:2023-11-04 06:39:49 24 4
gpt4 key购买 nike

我正在尝试制作带有文本的响应按钮,但我无法仅使用 css 和 html 使文本保持按钮大小

body {
margin: 0;
}

.button {
float: left;
width: 20vw;
height: 20vh;
text-align: center;
font-size: 6vmin;
font-weight: bold;
}
<!DOCTYPE html>
<html>

<head>
<link rel='stylesheet' type='text/css' href='chatstyle.css'>
</head>

<body>
<button class="button">justlongtext</button>
</body>

使用此代码然后尝试将窗口大小调整为 190px 310px文字会从按钮中消失

最佳答案

如果设置按钮的宽度高度,那么当文本大于按钮时,它会溢出。您可以通过仅设置一个维度(仅 width 或仅 height)来修复它。您可以添加一些填充来代替第二个维度,以使按钮看起来不错:

.only-height {
height: 50px;
}

.only-width {
width: 100px;
}
<button class="only-height">This is very long text, but it won't overflow because only the height is set.</button>
<br>
<button class="only-width">This is very long text, but it won't overflow because only the width is set.</button>

如果您想根据按钮的大小调整文本大小,我建议您使用 javascript。但是你也可以不用 javascript 来做。您也可以在字体大小中使用vwvh,但您必须根据文本长度手动设置。 Here is an example .它工作得很好,但如果文本太长,它会溢出,所以你必须将 calc(0.9vw + 0.9vh) 更改为较小的值,如 calc(0.5vw + 0.5vh)Second example .

关于html - 有没有办法只使用 css 或 html 使文本填充按钮大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53897383/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com