how to apply CSS styles to blocks/tags inside a BoundField in a GridView

时间:2016-10-20 12:34:11

标签: c# html css asp.net vb.net

I have a gridview:

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
    <title></title>
    <style> .GridViewCell 
            {
            display:inline-block; 
        width:200; } </style>
</head>
<body>
    <div>
    <asp:GridView ID="gvExportList" AutoGenerateColumns="false" AllowPaging="false" AllowSorting="false" runat="server" HeaderStyle-BackColor="LightGray">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID #" DataFormatString="&nbsp;{0}" />
                <asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:MM/dd/yyyy}" />
                <asp:BoundField DataField="Text" HeaderText="Text" />
    </Columns>
            </asp:GridView>
       </div>
</body>
</html>

I want the Text field to be something like this:

enter image description here

I tried this but it didn't show the style applied for each span:

 <span  style='display:inline-block; width:100'>Word</span><span>Here</span>
    </br>
    <span  style='display:inline-block; width:100'>And</span><span>Here</span>

with ItemStyle CSS It applies the CSS style to the whole string, not how I want it:

<ItemStyle CssClass="GridViewCell" />

Output:

enter image description here

1 个答案:

答案 0 :(得分:0)

也许只是&amp; tab;会有帮助吗?

或者,如果您希望每个单词在元素间隔开。 以下是在css / html中执行此操作的示例

CSS

div{
  background-color:gold;
  text-align:justify;
}

span{
  background-color:red;
  width:100%;
  height:1em;
  display:inline-block;
}

HTML

<div>
  Lorem ipsum sit dolor
  <span> </span>
</div>

参考:http://codepen.io/aakilfernandes/pen/IEAhF/