I'm currently working on a project and I'm facing an issue with text auto-entering without using any breaks. I'm not sure what the exact problem is. I implemented a code snippet from Overstack to display a div on hover. Perhaps the positioning of the div needs to be adjusted to be centered. I'm new to CSS, so I'm still learning.
Here is a snippet of my code:
C#
public string DisplayBordersByKeyword(string keyword)
{
string result = "";
foreach (DataTable table in _persistcode.SearchBordersByKeyword("%" + keyword + "%").Tables)
{
foreach (DataRow row in table.Rows)
{
result += "<span class='t1'>" + row["Border"].ToString() + ": <br>" + "</span>" + "<span class='t2'>" + row["Sanction"].ToString() + "<br> <br>" + "This belongs to category: " + row["CategoriesID"].ToString() + "</span>" + "<br>";
}
}
return result;
}
HTML & CSS
.infospan{
background: none repeat scroll 0 0 #F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
margin: 0 auto;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
display:none;
padding:0 20px;
}
.infospan::after{
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
p{
cursor:pointer;
}
p:hover span{
display:block;
} <!--Result-->
<div id="result" runat="server" style="text-align: center; color: white; font-size: 24px;"></div>