ASP.NET按钮的Chrome渲染,文本中有多行

时间:2016-02-01 03:20:16

标签: asp.net google-chrome html-rendering

我们有一个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,这才能正确呈现。即登录一行,然后直接在其下方输入。自Chrome版本48起,现在可以在一行中进行渲染(例如,登录[Enter])。我们尝试实施Wrapping an HTML input button's text value over multiple lines和其他选项(例如,将输入更改为内部带有<br/>的按钮)。

将数百个asp:多行的按钮更改为html <button>控件并不完全可行或不可取。

目前,这适用于所有IE浏览器,包括11,Edge,Firefox和Safari以及之前版本的Chrome。

任何建议将不胜感激。

AJ。

1 个答案:

答案 0 :(得分:1)

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

基于CSS的方法

1。使用:在

之前

<button>元素&#39;内容不能被CSS操纵(有人可能认为他们根本没有input,但这并不完全符合规范 - here's a good analysis的那一点),但如果你将content包裹在input中,可以将div添加到:before,然后使用div和一些定位,将文字放在空白content。这里的主要优点是你可以明确地控制换行符,然后在文本本身上使用input,这样你就不必对间距,字体大小等一丝不苟。缺点是对于要替换的按钮的每个实例,包装器text-align:centerdiv的定位可能不同。还有一个事实是,您无法通过后面的代码中的按钮本身设置文本,但我不认为这是一个showstopper。您可能必须将文本从服务器传递到客户端并在页面加载时设置它,或者创建input div并在后面的代码中执行此操作。

您可能希望使用类似jQuery&#39; .wrap()或类似的东西来实际包装所有按钮。

标记:

runat='server'

CSS:

<div class="input-lb">
    <asp:Button ID="btnLogin" runat="server"/>
</div>

2。保留.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; }

这个想法是限制按钮的宽度并强制换行。我只是在这里留下这种方法以供参考。使用它非常难看,甚至比第一种方法更加难以实现,并且它根本不允许你将这些单词集中在一起。

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

CSS:

<input>

按钮的确切文字为:

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

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

之前和之后的空格

您必须使用文本中的Environment.NewLine和空格来尝试将换行符放在正确的位置,并使文本看起来甚至远程居中。