Chrome 呈现 ASP.NET 文本中包含多行的按钮
Chrome rendering of ASP.NET Button with multiple lines in text
我们有一个 asp:Button 控件：
<asp:Button ID="btnLogin" AccessKey="l" runat="server" OnClick="btnLogin_Click" EnableViewState="false"></asp:Button>
在下面呈现为html：
<input type="submit" name="btnLogin" value="Login
[Enter]" id="btnLogin" accesskey="l" class="serverButton">
我们设置按钮的文字如下：
btnLogin.Text = "Login\n[Enter]";
注意 Login 和 [Enter] 之间的新行
在 Chrome 版本 47 之前，它可以正确呈现。 IE。登录一行，然后直接在其下方 [Enter]。从 Chrome 版本 48 开始，这现在呈现在一行上（例如 Login[Enter]）。我们已尝试实现 Wrapping an HTML input button's text value over multiple lines 和其他选项（例如，将输入更改为内部带有 <br/> 的按钮）。
将具有多行的数百个 asp:Button 更改为 html <button> 控件并不完全可行或不可取。
目前这适用于所有 IE，包括 11、Edge、Firefox 和 Safari 以及 Chrome 的早期版本。
如有任何建议，我们将不胜感激。
阿杰。
正如您所躲避的，并且可能已经发现的那样，您可以使用 <button> 以完全独立于浏览器的方式完成此操作。但是，您还暗示您对这种方法不感兴趣，但是如果您改变主意，也许最简单的方法是 create a custom control 继承自 System.Web.UI.WebControls.Button 但替换 Render 生成一个 <button> 元素。这当然也可能会影响代码的其他方面，包括行为和样式，但您 可能 能够通过 custom/user 控件来解决这些问题。这是我会采用并推荐的方法。
CSS 基于方法
1。使用 :before
input 元素的内容不能被 CSS 操纵（有人可能会说他们根本没有 content，但这并不完全是规范所说的 - [=该点的 36=]），但是如果将 input 包装在 div 中，则可以将 :before 添加到 div，然后使用 content 和一些定位，将文本放在空白 input 之上。这里的主要优点是您可以显式控制换行符，然后在文本本身上使用 text-align:center，因此您不必对间距、字体大小等非常细致。缺点是包装 div 和 input 的定位对于您要替换的按钮的每个实例可能不同。还有一个事实是，您无法通过后面代码中的按钮本身设置文本，但我不认为这是一个障碍。您要么必须将文本从服务器传递到客户端并在页面加载时设置它，要么制作 div runat='server' 并在后面的代码中执行。
您可能想使用类似 jQuery 的 .wrap() 或类似的东西来实际包裹所有按钮。
标记：
<div class="input-lb">
<asp:Button ID="btnLogin" runat="server"/>
</div>
CSS:
.input-lb:before {
content:"Login\a[Enter]"; /* \a to get line break with css content */
white-space:pre-line; /* critical to collapse whitespace but not line breaks */
text-align:center; /* the primary advantage over my previous approach */
z-index: 100; /* must be higher than that of the input, so text is on top */
pointer-events:none; /* so you can click the button underneath the text */
position: relative; /* required */
display:inline-block; /* you may not need/want this */
width: 60px; /* You will have to play around with the position, including the input's styling below */
left:35px;
bottom:3px;
}
.input-lb input {
width:70px;
height:40px;
position:relative;
left:-35px;
}
2。保留 <input>
想法是限制按钮的宽度并强制换行。我只是将这种方法留在这里以供参考。使用这个非常难看，甚至比第一种方法更难看，而且它根本不允许你将单词居中。
标记与原始标记保持一致 post。
CSS:
white-space: pre;
width: 60px;
word-wrap: break-word;
按钮的确切文本为：
string.Format("Login {0} [Enter]", Environment.NewLine);
注意： Environment.NewLine
前后的空格
您将不得不尝试使用文本中的 width 和空格来尝试将换行符放在正确的位置并使文本看起来甚至居中。
我们有一个 asp:Button 控件：
<asp:Button ID="btnLogin" AccessKey="l" runat="server" OnClick="btnLogin_Click" EnableViewState="false"></asp:Button>
在下面呈现为html：
<input type="submit" name="btnLogin" value="Login
[Enter]" id="btnLogin" accesskey="l" class="serverButton">
我们设置按钮的文字如下：
btnLogin.Text = "Login\n[Enter]";
注意 Login 和 [Enter] 之间的新行
在 Chrome 版本 47 之前，它可以正确呈现。 IE。登录一行，然后直接在其下方 [Enter]。从 Chrome 版本 48 开始，这现在呈现在一行上（例如 Login[Enter]）。我们已尝试实现 Wrapping an HTML input button's text value over multiple lines 和其他选项（例如，将输入更改为内部带有 <br/> 的按钮）。
将具有多行的数百个 asp:Button 更改为 html <button> 控件并不完全可行或不可取。
目前这适用于所有 IE，包括 11、Edge、Firefox 和 Safari 以及 Chrome 的早期版本。
如有任何建议，我们将不胜感激。
阿杰。
正如您所躲避的，并且可能已经发现的那样，您可以使用 <button> 以完全独立于浏览器的方式完成此操作。但是，您还暗示您对这种方法不感兴趣，但是如果您改变主意，也许最简单的方法是 create a custom control 继承自 System.Web.UI.WebControls.Button 但替换 Render 生成一个 <button> 元素。这当然也可能会影响代码的其他方面，包括行为和样式，但您 可能 能够通过 custom/user 控件来解决这些问题。这是我会采用并推荐的方法。
CSS 基于方法
1。使用 :before
input 元素的内容不能被 CSS 操纵（有人可能会说他们根本没有 content，但这并不完全是规范所说的 - [=该点的 36=]），但是如果将 input 包装在 div 中，则可以将 :before 添加到 div，然后使用 content 和一些定位，将文本放在空白 input 之上。这里的主要优点是您可以显式控制换行符，然后在文本本身上使用 text-align:center，因此您不必对间距、字体大小等非常细致。缺点是包装 div 和 input 的定位对于您要替换的按钮的每个实例可能不同。还有一个事实是，您无法通过后面代码中的按钮本身设置文本，但我不认为这是一个障碍。您要么必须将文本从服务器传递到客户端并在页面加载时设置它，要么制作 div runat='server' 并在后面的代码中执行。
您可能想使用类似 jQuery 的 .wrap() 或类似的东西来实际包裹所有按钮。
标记：
<div class="input-lb">
<asp:Button ID="btnLogin" runat="server"/>
</div>
CSS:
.input-lb:before {
content:"Login\a[Enter]"; /* \a to get line break with css content */
white-space:pre-line; /* critical to collapse whitespace but not line breaks */
text-align:center; /* the primary advantage over my previous approach */
z-index: 100; /* must be higher than that of the input, so text is on top */
pointer-events:none; /* so you can click the button underneath the text */
position: relative; /* required */
display:inline-block; /* you may not need/want this */
width: 60px; /* You will have to play around with the position, including the input's styling below */
left:35px;
bottom:3px;
}
.input-lb input {
width:70px;
height:40px;
position:relative;
left:-35px;
}
2。保留 <input>
想法是限制按钮的宽度并强制换行。我只是将这种方法留在这里以供参考。使用这个非常难看，甚至比第一种方法更难看，而且它根本不允许你将单词居中。
标记与原始标记保持一致 post。
CSS:
white-space: pre;
width: 60px;
word-wrap: break-word;
按钮的确切文本为：
string.Format("Login {0} [Enter]", Environment.NewLine);
注意： Environment.NewLine
您将不得不尝试使用文本中的 width 和空格来尝试将换行符放在正确的位置并使文本看起来甚至居中。