时间戳

首页 > 解决方案 > 如何从我的按钮开始的地方开始文本并且我不想将它流到外面？

html - 如何从我的按钮开始的地方开始文本并且我不想将它流到外面？

问题描述

我是编码新手，已经为此工作了三天，无法在我的代码中解决这个问题我想从按钮从左侧开始的确切位置开始按钮内的文本，我不希望它流到外面请帮助谢谢进步

    <style>
        .container {
            margin: 0 auto;
            /* this will center the page */
            width: 70%;
            /*  width here */
        }
        
        .column {
            float: left;
            width: auto;
            padding: 5px 10px;
        }
        
        .square {
            height: 390px;
            width: 290px;
            background-color: #22262e;
            border-radius: 5px;
        }
        
        .button {
            border-radius: 4px;
            width: 34%;
            background-color: #2c7f40;
            /* Green */
            border: none;
            color: white; /* Text color in button */
            font-family: "Lucida Console", "Courier New", monospace;
            padding: 4% 30%;
            text-align: left;
            text-decoration: none;
            display: inline-block;
            font-size: 20px;
            margin: 4px 2px;
            cursor: pointer;
            -webkit-transition-duration: 0.4s;
            /* Safari */
            transition-duration: 0.4s;
        }
    </style>
</head>

<body>

    <h2>Button in Box Project</h2>

    <div class="container">
        <div class="column">
            <div class="square"> <br>
                <center><a href="https://www.duckduckgo.com" class="button">T</a></center>
            </div>
        </div>

 


        

    </div>

标签： htmlcsswebnew-operator

解决方案

.container {
            margin: 0 auto;
            /* this will center the page */
            width: 70%;
            /*  width here */
        }
        
        .column {
            float: left;
            width: auto;
            padding: 5px 10px;
        }
        
        .square {
            height: 390px;
            width: 290px;
            background-color: #22262e;
            border-radius: 5px;
        }
        
        .button {
            border-radius: 4px;
            width: auto;
            background-color: #2c7f40;
            /* Green */
            border: none;
            color: white; /* Text color in button */
            font-family: "Lucida Console", "Courier New", monospace;
            padding: 5px 0px;
            text-decoration: none;
            font-size: 20px;
            margin: 4px 2px;
            cursor: pointer;
            -webkit-transition-duration: 0.4s;
            /* Safari */
            transition-duration: 0.4s;
            position : relative;
            overflow-wrap: break-word;
            line-height: 2em;
            max-width : 100%;
            display: inline-block;
            
        }
<div class="container">
    <div class="column">
        <div class="square"><br>
                <a href="https://www.duckduckgo.com" class="button">Hello , Hello </a>
                <a href="https://www.duckduckgo.com" class="button">Hello</a>
                <a href="https://www.duckduckgo.com" class="button">Hello , Hello</a>
        </div>
    </div>
</div>

推荐阅读