How to remove enter in css

Question

I'm working on something but i'd like to know how to stop text from auto entering. I don't use a break there so I don't really know what the problem is. I used something from overstack to show a div when you hover on it. Maybe this need's to be centered because the div wouldn't have the right position. I don't really know I'm pretty new to CSS.

My code looks like this:

C#

        public string ToonGrenzenPerZoekwoord(string zoekwoord)
    {
        string list = "";/*"<h1> Resultaten via grenzen </h1> <br>";*/

        foreach (DataTable table in _persistcode.SearchGrenzenByKeyword("%" + zoekwoord + "%").Tables)
        {
            foreach (DataRow row in table.Rows)
            {
                list += "<span class='t1'>" + row["Grens"].ToString() + ": <br>" + "</span>" + "<span class='t2'>" + row["Sanctie"].ToString() + "<br> <br>" + "Dit hoort thuis in de categorie: " + row["IDCategorieën"].ToString() + "</span>" + "<br>";
            }
        }

        return list;
    }

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;
}

 <!--Resultaat-->
        <div id="resultaat" runat="server" style="text-align: center; color: white; font-size: 24px;"></div>

I see an awful lot of `
`'s. Are assuming you mean a white space by `auto entering`; are you sure that isn't the problem? — Stefan, May 04 '17 at 16:44

score 0 · Answer 1 · answered May 04 '17 at 16:46

0

I don't know about the css trick but i think this simple javascript code will help you :

$('your_class').bind('keypress', function(e){
   if(e.keyCode == 13){
   return false;
   }
});

answered May 04 '17 at 16:46

Mehdi Karimi

528
4
25

score 0 · Answer 2 · edited May 23 '17 at 12:02

If you mean white space beneath your list items you should be careful with the <br>'s

Although I don't support the use of <br> in general, (see Is it sometimes bad to use <BR />?) you might want to try this:

public string ToonGrenzenPerZoekwoord(string zoekwoord)
{
    string list = "";/*"<h1> Resultaten via grenzen </h1> <br>";*/

    foreach (DataTable table in _persistcode.SearchGrenzenByKeyword("%" + zoekwoord + "%").Tables)
    {
        foreach (DataRow row in table.Rows)
        {
            list += "<p class='t1'>"; //using paragraph
            list += row["Grens"].ToString();
            list += ": <br>" + "</span>" + "<span class='t2'>";
            list += row["Sanctie"].ToString() + "<br> <br>";
            list += "Dit hoort thuis in de categorie: "; 
            list += row["IDCategorieën"].ToString();
            list += "</p>"; //ommited final <br>
        }
    }

    return list;
}

It might be even better to rule out all br's, but I'll need to be sure what your exact question is.

Side note: please be advised if somehow in your data, e.g.: row["Sanctie"] a value of

<script>alert('turtle`);</script>

is present, you'll find yourself having a hard time to 'shoo it away'.

How to remove enter in css

2 Answers2