What methods can be used to prevent words from breaking inside a label?

I'm having trouble styling a label with CSS properties because every word inside the label is breaking to a new line. For example, "Withdraw money" is displaying like this:

Withdraw 
money

I've tried various properties like 

white-space:nowrap,float: left,display:inline-block,display:inline
, but none of them seem to work! Additionally, can someone please explain why the color property is not affecting the text inside the label? Here's my code:

body,
h1,
h2,
h3,
p,
td,
quote,
small,
form,
input,
ul,
li,
ol,
label {
  margin: 0px;
  padding: 0px;
}
body {
  margin-top: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: #51555C;
  height: 100%;
  font-size: 11px;
}
/* Form styles */

input,
select {
  padding: 3px;
  color: #333333;
  border: 1px solid #96A6C5;
  margin-top: 2px;
  width: 200px;
  font-size: 14px;
}
select {
  width: auto;
  padding: 2px;
}
.formline {
  padding: 3px;
}
label {
  font-size: 14px;
  display: block;
  text-align: left;
  white-space: nowrap;
  color: #203360;
}
table {
  width: 400px;
}
td {
  font-size: 11px;
}
.input-container {
  padding: 8px;
}
#div-regForm,
.registered {
  border: 3px solid #eeeeee;
  padding: 15px;
  background: url(images/bg.jpg) repeat-x #999933;
  color: #203360;
  margin: 15px auto 40px auto;
  width: 400px;
}
.form-title,
.form-sub-title {
  font-size: 40px;
  font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
}
.form-sub-title {
  font-weight: normal;
  padding: 6px 0 15px 0;
}
<div id="div-regForm">
  <div class="form-title">Withdraw money</div>
  <table>
    <tbody>
      <tr>
        <td>
          <label for="fname" style="color: #990000">Withdraw address</label>
        </td>
        <td>
          <div class="input-container">
            <input name="email" id="email" type="text" />
          </div>
        </td>
      </tr>


      <tr>
        <td>
          <label for="fname" style="color: #990000">Amount</label>
        </td>
        <td>
          <div class="input-container">
            <input name="amount" id="amount" type="text" />
          </div>
        </td>
      </tr>
    </tbody>

  </table>

</div>

htmlcss

Answer №1

It appears that the 'Withdraw Money' text is contained within a div element. You may want to consider adding word-break: keep-all; to the div and ensuring that white-space: nowrap; is included as well.

Don't forget to review the max-width of your divs and labels, as well as the width of their parent elements. Applying word-break in these areas may also be beneficial.

Although I can't provide a direct solution, as I am still learning web development myself, adjusting these properties helped me troubleshoot similar issues on my own website :)

Answer №2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8>
    <title></title>
    <style>
        /* Custom Page styles */

        body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
            margin:0px;
            padding:0px;
        }

        body{
            margin-top:20px;
            font-family:Arial, Helvetica, sans-serif;
            color:#51555C;
            height:100%;

            font-size:11px;
        }


        /* Custom Form styles */

        input,select{
            padding:3px;
            color:#333333;

            border:1px solid #96A6C5;
            margin-top:2px;
            width:200px;
            font-size:14px;
        }

        select{
            width:auto;
            padding:2px;
        }

        .formline{
            padding:3px;
        }

        label{
            font-size:14px;

            display:block;
            text-align:left;
            white-space:nowrap;
            color:#203360;
        }

        table{
            width:400px;
        }

        td{
            font-size:11px;

        }

        .input-container{
            padding:8px;

        }


        #div-regForm,.registered{
            border:3px solid #eeeeee;
            padding:15px;

            background:url(images/bg.jpg) repeat-x #999933;
            color:#203360;
            margin:15px auto 40px auto;
            width:400px;
        }

        .form-title,
        .form-sub-title{
            font-size:40px;

            font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
            font-size:20px;
            font-weight:bold;
        }

        .form-sub-title{
            font-weight:normal;
            padding:6px 0 15px 0;


        }
    </style>
</head>
<body>
<div id="div-regForm">
    <div class="form-title">Withdraw money</div>
    <table>
        <tbody>
        <tr>
            <td><label for="fname" style="color: #990000">Withdraw  address </label></td>
            <td><div class="input-container"><input name="email" id="email" type="text" /></div></td>
        </tr>

        <tr>
            <td><label for="fname" style="color: #990000">Amount</label></td>
            <td><div class="input-container"><input name="amount" id="amount" type="text" /></div></td>
        </tr>
        </tbody>

    </table>

</div>
</body>
</html>

I just pasted the provided code into the text area. The code seems to be functioning correctly based on my tests in various browsers. Please verify your browser version for compatibility.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reducing the amount of text displayed on ion-text to a minimum

HTML: <ion-list *ngFor="let message of messages"> <ion-item lines="none" type="button" button="true"> <ion-grid> <ion-row> <ion-col class="message"> <ion-text> ...

htmlcssangulartypescriptionic-framework

Creating a text input that spans the full width of the form in a Bootstrap

I'm having trouble creating a text box that spans the entire width of my container. <div class="row"> <div class="col-md-12"> <form class="form-inline" role="form"> <input type="text" class= ...

htmlcsstwitter-bootstrap-3

Prevent divs from jumping to a new line with the float property

I've been busy working on a responsive webpage and so far, everything is going smoothly. The only issue I'm facing is that when the browser window size decreases and reaches a certain point, the div elements jump to the next line. Take a look at ...

htmlcss

Creating a sticky footer using Vue.js for both mobile and desktop display views

Looking for a solution to create a sticky footer that works on both desktop and mobile views without overlapping the main content? The current code either overlaps or doesn't stick to the bottom. Seeking a responsive approach. App.vue: <template& ...

htmlcssvue.jsfooter

What is the best way to set specific filenames in order to transmit them to the server?

Is there a way to send images files to a server using NODEJS without utilizing the traditional input file tag? I want to hard code the filepaths in an HTML client to achieve this. Are there any solutions available for this? Thanks in advance. ...

htmlfilenode.jsfile-upload

Adding text on top of images for optimal mobile viewing

I'm struggling to ensure that the text stays contained next to the image. It's working fine on desktop and tablet, but I'm facing challenges with mobile. While I have managed to improve it slightly, I can't figure out what exactly I am ...

csswordpress

Utilizing jQuery to implement a CSS style with a fading effect, such as FadeIn()

I have a jQuery script that applies a CSS style to an HTML table row when the user clicks on a row link: $(this).closest('tr').css("background-color", "silver"); Is there a way to soften this color change effect, such as by gradually fading in ...

javascriptjquerycss

Order of flexbox items when placed within separate divs?

Looking to rearrange the order of items using flexbox, but hitting a roadblock because one of the items I want to reorder is in a different div and not a direct child of the same parent as the other items. <div class="wrapper"> <div class="some ...

htmlcssflexbox

Whenever I try to make my links responsive, they don't seem to work as intended

This is the HTML snippet <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> ...

htmlcssbootstrap-4

Conceal any zero values from an empty numerical input

Currently, I have a form that retrieves data from a database and includes a number input type field. When the field is empty, it defaults to displaying "0." However, I would like to hide the "0" and only show the value if it is different from 0. Despite a ...

javascripthtml

JavaScript array images are not showing when using the img tag

For this module, I am working on creating a flipbook (magazine) using images stored in a JavaScript array. However, I am facing an issue where the images are not loading up properly. Instead of displaying the image, it shows as [object" htmlimageelement]=" ...

javascriptjqueryhtmlcss

Executing Cross-Component Communication in Angular 7: A Quick Guide

I've encountered a challenge with a checkbox in the header component. If the checkbox is checked, I need to display an alert message when the application loads. The tricky part is that the checkbox is linked to the home component. Therefore, if I am o ...

htmlangulartypescript

Creating dynamic DIV elements in an AngularJS file using data retrieved from a Sql server

I need to dynamically add elements based on data retrieved from a MSSQL server in the specified area: <div id="ApplicationForm" class="tabcontent" style="display:none;"> <div class="tab_section"> ...

htmlangularjs

Using jQuery and Bootstrap to Enhance Checkbox Button Styling

I am currently working on an asp.net webform and attempting to style my checkbox similar to the design shown here: When I try to replicate the HTML and JS code from the above link on my page, it does not seem to be functioning properly, most likely due to ...

javascriptjquerycssasp.nettwitter-bootstrap

Navigate between paper cards with Polymer's side scrolling feature

I recently started using Polymer after a long break from HTML and have been relying on stack-overflow and Google's polymer guide for guidance. Currently, I am working on a product catalogue project and I have already started coding the paper-cards for ...

htmlpolymerpolymer-starter-kit

CSS can always surprise with its unexpected animations

Currently developing a static website with CSS animations: * { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease- ...

htmlcssanimation

What is the best way to ensure my background image adjusts properly for both iPhones and Android devices to be responsive?

I have set the background image in my CSS to fit perfectly without any need for adjustments. The goal is for the image to resize itself when viewed on mobile devices or tablets. .intro { display: table; width: 100%; height: auto; padding: ...

htmlcssiphoneresponsive-design

Delegating events with .on('click') and using the CSS negation selector :not()

Struggling to implement event delegation for a dynamically added or removed class? I need to create an event for elements that are clicked, but without a specific class. Here's the code I have so far, but it doesn't seem to be working. Could it b ...

jquerycsseventsdelegationnegation

Learn how to utilize AngularJS to create dropdown menus within data cells of an HTML table

I am working on populating rows in an HTML table based on the response I get from AngularJS. My goal is to have one of the table data cells formatted as a dropdown menu. Specific Requirements: The dropdown menu should include three values (A, B, and C). ...

htmlangularjs

Utilizing CSS to transform text with a sleek, animated writing effect

I have utilized CSS to create a captivating animation effect where text is written out in a smooth style. I am seeking assistance in replacing the current text with a different one while maintaining the same effect. HTML & CSS .typed-out{ overflow: ...

htmlcssanimationtext