Posts Tagged ‘webdesign’

pre标签会原样保留HTML内容的格式，可是如果宽度过大会把页面撑坏，这时候需要自动换行来帮忙：

Wrapping the pre tag

Making preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let’s you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn’t wrap:

/* Browser specific (not valid) styles to make preformatted text wrap /
pre {
white-space: pre-wrap;       / css-3 /
white-space: -moz-pre-wrap;  / Mozilla, since 1999 /
white-space: -pre-wrap;      / Opera 4-6 /
white-space: -o-pre-wrap;    / Opera 7 /
word-wrap: break-word;       / Internet Explorer 5.5+ */
} 

来源：Ajaxian » Wrapping the pre tag

使用了Master的ASP.NET Content页面无法直接引用外部样式或内嵌样式，因为CSS样式必须出现在HTML的head标签内，而Content页面自身是不能包含head的。不过通过编程，很容易做到这一点，以下就是解决方案（也可以用相同的手段来添加其他HTML元素）。先定义以下两个方法：

1. 内嵌样式支持
   

   protected void AddInlineStyle(string style)
   {
       HtmlGenericControl node = new
           HtmlGenericControl("style");
       node.Attributes.Add("type", "text/css");
       node.InnerText = style;
       Page.Header.Controls.Add(node);
   }

2. 外部样式支持
   

   protected void AddLinkedStyle(string url)
   {
       HtmlLink link = new HtmlLink();    link.Attributes.Add("type", "text/css");
       link.Attributes.Add("rel", "stylesheet");
       link.Attributes.Add("href", url);
       Page.Header.Controls.Add(link);
   }

在 Page_Load 方法中，使用上面两个方法来添加样式：

1. 添加内嵌样式
   

   AddInlineStyle("body { padding:10px; margin:5px 0; }");

2. 引用外部样式
   

   AddLinkedStyle("/styles/layout.css");
   

简单而实用。HtmlGenericControl 是相当有用的类，在ASP.NET中可以用来定制很多输出行为，实在是应该多加利用的好东东。