Question

我使用css属性设置样式标签，但问题是每个字都打破了标签内的新行。例如"Withdraw money"显示这种方式

Withdraw 
money

我尝试了white-space:nowrap,float: left,display:inline-block,display:inline,这样的所有属性，但没有任何工作！还有一件事，有人可以解释为什么color属性不适用于标签内的文本吗？我的代码如下：

body,
h1,
h2,
h3,
p,
td,
quote,
small,
form,
input,
ul,
li,
ol,
label {
  margin: 0px;
  padding: 0px;
}
body {
  margin-top: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #51555C;
  height: 100%;
  font-size: 11px;
}
/* Form styles */

input,
select {
  padding: 3px;
  color: #333333;
  border: 1px solid #96A6C5;
  margin-top: 2px;
  width: 200px;
  font-size: 14px;
}
select {
  width: auto;
  padding: 2px;
}
.formline {
  padding: 3px;
}
label {
  font-size: 14px;
  display: block;
  text-align: left;
  white-space: nowrap;
  color: #203360;
}
table {
  width: 400px;
}
td {
  font-size: 11px;
}
.input-container {
  padding: 8px;
}
#div-regForm,
.registered {
  border: 3px solid #eeeeee;
  padding: 15px;
  background: url(images/bg.jpg) repeat-x #999933;
  color: #203360;
  margin: 15px auto 40px auto;
  width: 400px;
}
.form-title,
.form-sub-title {
  font-size: 40px;
  font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
}
.form-sub-title {
  font-weight: normal;
  padding: 6px 0 15px 0;
}

<div id="div-regForm">
  <div class="form-title">Withdraw money</div>
  <table>
    <tbody>
      <tr>
        <td>
          <label for="fname" style="color: #990000">Withdraw address</label>
        </td>
        <td>
          <div class="input-container">
            <input name="email" id="email" type="text" />
          </div>
        </td>
      </tr>


      <tr>
        <td>
          <label for="fname" style="color: #990000">Amount</label>
        </td>
        <td>
          <div class="input-container">
            <input name="amount" id="amount" type="text" />
          </div>
        </td>
      </tr>
    </tbody>

  </table>

</div>

Answer 1

似乎'提款“是一个div。尝试应用word-break：keep-all;到了div。看起来div也缺少white-space：nowrap;

同时检查你的div'和标签'max-width及其父母的宽度。您也可以尝试在这里应用分词。

我无法发表评论，我也不确定这是否也会有所帮助，我现在正在学习网页开发，而且我不得不在我的网站上做很多事情，这些都是帮助我的事情。）

Answer 2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* Page styles */

        body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
            margin:0px;
            padding:0px;
        }

        body{
            margin-top:20px;
            font-family:Arial, Helvetica, sans-serif;
            color:#51555C;
            height:100%;

            font-size:11px;
        }


        /* Form styles */

        input,select{
            padding:3px;
            color:#333333;

            border:1px solid #96A6C5;
            margin-top:2px;
            width:200px;
            font-size:14px;
        }

        select{
            width:auto;
            padding:2px;
        }

        .formline{
            padding:3px;
        }

        label{
            font-size:14px;

            display:block;
            text-align:left;
            white-space:nowrap;
            color:#203360;
        }

        table{
            width:400px;
        }

        td{
            font-size:11px;

        }

        .input-container{
            padding:8px;

        }


        #div-regForm,.registered{
            border:3px solid #eeeeee;
            padding:15px;

            background:url(images/bg.jpg) repeat-x #999933;
            color:#203360;
            margin:15px auto 40px auto;
            width:400px;
        }

        .form-title,
        .form-sub-title{
            font-size:40px;

            font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
            font-size:20px;
            font-weight:bold;
        }

        .form-sub-title{
            font-weight:normal;
            padding:6px 0 15px 0;


        }
    </style>
</head>
<body>
<div id="div-regForm">
    <div class="form-title">Withdraw money</div>
    <table>
        <tbody>
        <tr>
            <td><label for="fname" style="color: #990000">Withdraw  address </label></td>
            <td><div class="input-container"><input name="email" id="email" type="text" /></div></td>
        </tr>

        <tr>
            <td><label for="fname" style="color: #990000">Amount</label></td>
            <td><div class="input-container"><input name="amount" id="amount" type="text" /></div></td>
        </tr>
        </tbody>

    </table>

</div>
</body>
</html>

我只是复制并粘贴了你的代码。它很简单。（在IE11，Chrome和Firefox中测试过）只需查看您的浏览器版本

即可

如何避免标签内的单词破坏？

2 个答案: