#1 - 2018-8-12 06:38
dhzy
现状：按钮的大小会随着按钮内部文字变化而变化
需求：无论有多少字按钮大小都不变

这要怎么写，求助(bgm37)
#2 - 2018-8-12 07:10
lhb5883-吹冈王♛⑩ (BGMのTrinitas<=>婊冈妈<=>补冈妈<=>拜冈妈 三位一体 ...)
切个div专门放这个按钮？
#2-1 - 2018-8-12 07:35
dhzy
和div有关系吗...不是css的问题吗...
#2-2 - 2018-8-12 07:43
lhb5883-吹冈王♛⑩
dhzy 说: 和div有关系吗...不是css的问题吗...
按div比例设button大小不就不变了？
#3 - 2018-8-12 07:44
烈之斩 (V1046-R MAHORO)
指定大小不就行了？

http://jsbin.com/tocukajuxo/2/edit?html,css,output
#3-1 - 2018-8-12 20:04
dhzy
原来是我把padding当大小了(bgm38)
#4 - 2018-8-12 07:44
CureDovahkinn🤔 (プリキュアなりたい)
元素大小写死，然后js检测文本字数，做个算术，设置合适的字号
#4-1 - 2018-8-12 07:56
若卡
厉害，明明自动缩放字号不在“需求”里，却一眼就看穿了甲方的阴谋 (bgm38)
#4-2 - 2018-8-12 12:19
MousHu
若卡 说: 厉害，明明自动缩放字号不在“需求”里，却一眼就看穿了甲方的阴谋
(bgm93)
#4-3 - 2018-8-12 18:31
CureDovahkinn🤔
若卡 说: 厉害，明明自动缩放字号不在“需求”里，却一眼就看穿了甲方的阴谋
(bgm40)
#4-4 - 2018-8-12 20:05
dhzy
若卡 说: 厉害，明明自动缩放字号不在“需求”里，却一眼就看穿了甲方的阴谋
(bgm39)
#5 - 2018-8-12 08:18
小寒 (Idle singer of an empty day)
不用 js，按钮字号设成相对单位就可以
#5-1 - 2018-8-12 18:27
CureDovahkinn🤔
想半天%也不对 vh vw也不对啊……字越多字体越小，只能js啊
#6 - 2018-8-12 08:40
君寻 (已淡出bgm38)
按钮用图标表示，文字显示在“title”中
#7 - 2018-8-12 09:40
拿月亮自刎 (情更怯)
这个 ？ white-space: nowrap;
#7-1 - 2018-8-12 10:47
君寻
overflow: hidden;
#7-2 - 2018-8-12 11:06
拿月亮自刎
君寻 说: overflow: hidden;
这样？
使用 ellipsis 并 设置 button title 属性。


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <title>test</title>

    <style type="text/css" media="screen">

      .ui-button {

        display: inline-block;

        line-height: 20px;

        font-size: 14px;

        text-align: center;

        color: #4c5161;

        border: 1px solid #d0d0d5;

        border-radius: 4px;

        padding: 9px 15px;

        min-width: 50px;

        background-color: #fff;

        background-repeat: no-repeat;

        background-position: center;

        text-decoration: none;

        cursor: pointer;

        overflow: visible;

      }

      .ellipsis {

        width: 60px;

        text-overflow: ellipsis;

        overflow: hidden;

        white-space: nowrap;

      }

    </style>

  </head>

  <body>

    <span class="ui-button ellipsis" title="long long long long long long text button">long long long long long long text button</span>

  </body>

</html>
#8 - 2018-8-12 20:08
dhzy
谢谢各位大佬