带有多行文本的 ASP.NET 按钮的 Chrome 呈现
Posted
技术标签:
【中文标题】带有多行文本的 ASP.NET 按钮的 Chrome 呈现【英文标题】:Chrome rendering of ASP.NET Button with multiple lines in text 【发布时间】:2016-05-09 10:23:18 【问题描述】:我们有一个 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。
【问题讨论】:
Environment.NewLine
代替 \n
有什么不同吗?无论如何,我会将其用作一般做法。
不,我们已经尝试过 Environment.Newline,结果相同。
【参考方案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
和文本中的空格来尝试将换行符放置在正确的位置,并使文本看起来更加居中。
【讨论】:
谢谢埃里克。如果必须的话,我们正在寻找可能实现类似forums.asp.net/t/1518381.aspx?Override+Button+Control 的东西。显然不希望进行任何更改,但如果涉及到覆盖 Render 事件可能是一个起点 @AnthonyJ 啊,ControlAdapter
,我什至没有想到这一点。是的,这是一种更直接的创建自定义行为的方法,您将从自定义控件或用户控件中获得。如果你能让它工作,我会说实际上去吧,因为这样你就不必担心每个不同文本值的文本/按钮位置混乱。
@AnthonyJ 我看到您已将其标记为已接受。谢谢,但是您最终是否使用了我提到的其中一种方法,或者您是否使用了控制适配器,或者其他方法?如果您实际上使用了自己的解决方案,则可以自己发布答案并接受它 - 不过现在后者有点晚了。只是好奇什么最终对你最有效。
我们还没有实现任何东西,但我们可能会选择 ControlAdapter。我将您的项目标记为答案,因为您还提供了有效的解决方案,虽然我们可能不会使用它们,但将来有人可能需要。 :-)以上是关于带有多行文本的 ASP.NET 按钮的 Chrome 呈现的主要内容,如果未能解决你的问题,请参考以下文章