带有多行文本的 ASP.NET 按钮的 Chrome 呈现

Question

我们有一个 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:Buttons 更改为 html <button> 控件并不完全可行或不可取。

目前，这适用于所有 IE，包括 11、Edge、Firefox 和 Safari 以及以前版本的 Chrome。

任何建议将不胜感激。

AJ。

Answer 1

正如您所逃避的并且可能已经发现的那样，您可以通过使用<button> 以完全独立于浏览器的方式完成此操作。但是，您还暗示您对这种方法不感兴趣，但是如果您改变主意，也许最简单的方法是使用继承自 System.Web.UI.WebControls.Button 的 create a custom control 但替换 Render 以生成 @ 987654328@ 元素。当然，这也可能会影响代码的其他方面，包括行为和样式，但您可能能够通过自定义/用户控件整体解决这些问题。这是我会采取并推荐的方法。

---

基于 CSS 的方法

---

1。使用：之前

input 元素的内容不能被 CSS 操纵（有人可能会说他们根本没有 content，但这并不是规范所说的 - here's a good analysis 在那一点上），但如果你换行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>

这个想法是限制按钮的宽度并强制换行。我只是将这种方法留在这里以供参考。使用它非常难看，甚至比第一种方法更难看，而且它根本无法让您将单词居中。

标记与您的原始帖子保持一致。

CSS：

white-space: pre;
width: 60px;
word-wrap: break-word;

按钮的确切文本为：

string.Format("Login {0} [Enter]", Environment.NewLine);

注意：Environment.NewLine 前后的空格

您将不得不使用width 和文本中的空格来尝试将换行符放置在正确的位置，并使文本看起来更加居中。