Attempting to squeeze a lengthy word into a small span

Apologies for my poor English.

I tried searching for an answer online but couldn't find a solution. Maybe I'm just not able to figure it out myself. All I need is to make those long words fit inside a button. This is how it currently looks. My code is posted on jsfiddle below:

Jsfiddle FIXED 

.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width:150px;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
}

.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></label></button>

I realized the issue was due to white-space:nowrap in the parent div, which prevented fitting any word in child elements.

<div class="w3-display-middle w3-large w3-animate-opacity" id="divclick3" style="white-space:nowrap;">
buttons with spans 
</div>

JSFIDDLE FIXED V.2

The broken JavaScript and my goal of aligning all four buttons in one line can be found here:

htmlcss

Answer №1

Simply include the following line of code:

word-break: break-all;

within the .chkbox class.

.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width: 150px;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
  word-break: break-all;
}

.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></label></button>

Answer №2

It is recommended to use width:auto; instead of width:150px; for the class .chkbox

.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width:auto;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
}

.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></label></button>

Answer №3

To increase the content width to 150px, replace meaningless text with valuable information.

.chkbox {
display: inline-block;
background-color: #FFBB40;
font: bold;
width:150px;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
border-radius: 4px;
border: none;
color: black;
text-align: center;
padding: 8px;
transition: all 0.5s;
cursor: pointer;
}

.chkbox span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.chkbox span:after {
content: '\2713';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.chkbox:hover span {
padding-right: 25px;
}
.chkbox:hover span:after {
opacity: 1;
right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>this is testing here this is testing here</span></label></button>

Answer №4

To handle long words in a checkbox, you can utilize 

.chkbox span {word-break: break-word}
- For more information, visit this link

You could also consider incorporating hyphenation for further enhancement.

I recently came across this intriguing terminology

.chkbox {
  display: inline-block;
  background-color: #FFBB40;
  font: bold;
  width: 150px;
  padding: 8px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  border-radius: 4px;
  border: none;
  color: black;
  text-align: center;
  padding: 8px;
  transition: all 0.5s;
  cursor: pointer;
}

.chkbox span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  word-break: break-word;
}

.chkbox span:after {
  content: '\2713';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.chkbox:hover span {
  padding-right: 25px;
}

.chkbox:hover span:after {
  opacity: 1;
  right: 0;
}
<button class="chkbox" id="q1a" name="q1" type="button" value="<?php echo $array['0']['2']; ?>"><label for="q1a"><span>Pneumonoultramicroscopicsilicovolcanoconiosis</span></label></button>

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

What is the best way to show a loading spinner as my Next image component loads, especially when there is an existing image already being displayed?

I'm trying to incorporate a loading spinner or any other HTML element while an image is being loaded. Currently, I am utilizing the ImageComponent to showcase images in a random movie generator. Although I managed to make the spinner work for the init ...

htmlreactjsnext.js

"Utilize jQuery to prevent the default action, perform a specific task, and

I am currently working on a Rails application where I want to enable users to tag blog posts with categories by typing the tags into a text field and separating them with a space (which is functional!). However, I am facing an issue when trying to submit ...

jqueryhtmlruby-on-railsevent-handling

What is the best method in JavaScript to create three different shades of a color?

My sass function generates lighter and darker versions of a base color, here is the code snippet: $colors: ( betpawa-green: #107A3D, lime-green: #8DC63F, yellow: #FBCD00, ); @mixin color-generator { @each $name, $hex in $colors { &-#{$nam ...

javascripthtmlfor-loopsasstemplate-literals

What is the process for adjusting the color of the underline in Material UI input fields

I am facing an issue with a Material UI Select component that is on a dark background. I want to change the text and line colors to white just for this particular component, while keeping the rest of the Select instances unchanged. Although I have managed ...

cssreactjsmaterial-ui

Duplicate text content from a mirrored textarea and save to clipboard

I came across some code snippets here that are perfect for a tool I'm currently developing. The codes help in copying the value of the previous textarea to the clipboard, but it doesn't work as expected when dealing with cloned textareas. Any sug ...

javascriptjqueryhtmltextarea

grab the content from a text editor and insert it into a div element

Currently, I am trying to extract text from my content editable div and place it in another div (similar to the one seen on stack overflow). However, I am encountering a frustrating issue. 1. My content div seems to be lagging behind. When I type in my ed ...

javascripthtmlcss

Create a footer with a centered column orientation

I am currently working on creating a footer with four columns, one of which will display an image while the others will contain useful hyperlinks. This is what I have accomplished so far: http://jsfiddle.net/Lqh5a/ HTML <div id="wrapper"> <div ...

htmlcssimagefooter

Silky animations in kinetic.js (html5 canvas)

I am seeking a better grasp on kinetic.js animation. Recently, I came across a tutorial at . After experimenting with the code provided, I managed to create an animation that positions my rectangle at x coordinate 100. However, I am struggling to achieve s ...

javascripthtmlcanvaskineticjs

What is causing the extra space on the right side of the box?

I've been struggling to align text next to an image inside a box. Desired outcome CSS: #roundedBox { border-radius: 25px; background: #363636; width: auto; height: auto; margin: 10%; display: flex; position: relative; ...

javascriptcsstextnext.jstheme-ui

Displaying a loading spinner image as PHP script runs

Hey there! I've been experimenting with using a script to show a loading bar while my PHP code is running. I followed the instructions on this website, but even after following the exact steps, my loading bar still isn't showing up. Any suggestio ...

javascriptphpjquerycss

JavaScript-powered dynamic dropdown form

I need help creating a dynamic drop-down form using JavaScript. The idea is to allow users to select the type of question they want to ask and then provide the necessary information based on their selection. For example, if they choose "Multiple Choice", t ...

javascripthtmlcssformscascadingdropdown

Creating an interactive flip card using HTML and CSS

I am a beginner in HTML and I'm looking to create a specific element that flips. I have created this file. However, when the first element is flipped (refer to the codepen), the content appears at the bottom (see image). Can someone assist me in ensu ...

htmlcssweb-deploymentbootstrap-5

JavaScript takes the spotlight before CSS

Currently experiencing this issue in Chrome, although Firefox seems to be working fine so far. Here is a greatly simplified version of the problem: HTML: <div class="thumbnail"> <a href='#' id="clickMe">Click me!</a> </d ...

javascriptjquerycsstwitter-bootstrapresponsive-design

The Jquery css on my website is not functioning properly

After creating a website feature where clicking on a specific div triggers an onclick event processing a chat_generate function, I encountered some issues. This funciton should insert HTML for the chat into a designated .open_div based on the id generated ...

javascriptphpjqueryhtmlcss

What are the steps to retrieve information from a raw HTML document?

Can data be extracted from a poorly written HTML file without IDs or classes? For example, if there is an unstructured saved HTML file of a profile webpage and I want to extract specific information like 'hobbies', can PHP be used for this task? ...

phphtmlparsinghtml-content-extraction

Using JavaScript, generate table rows and cells

Hey there, I'm struggling with formatting my table correctly within the designated section. Currently, it's printing the rows one below the other instead of creating a 'tr' and multiple 'td' elements for each input field. The ...

javascripthtmljson

Retrieve data from a specific page on a URL using AJAX

window.onload= function(){ var page = window.location.hash; if(window.location.hash != ""){ page = page.replace('#page:', ''); getdata('src/'.page); } } Once the window has loaded, I want to check ...

javascripthtmlajax

Activating a link without clicking will not trigger any javascript functions

I have been attempting to display an image when I hover over a link, but for some reason, the .hover() event is not functioning as expected. Initially, I am just aiming to have an alert pop up. Once I have that working, I can proceed with fading elements i ...

javascriptjqueryhtml

From Spring MVC to JSON data output

I have a JAVA EE backend and I am using Spring MVC. Currently, I have an AJAX call set up as follows: function getAllProjects() { $.getJSON("project/getall", function(allProjects) { ??? }); } In my backend system: @Reques ...

javahtmlajaxjsonspring-mvc

Prevent unauthorized access to HTML pages with a secure login system

I created a basic login system using JavaScript that requires users to enter the correct username and password. Once verified, they are redirected to log1.html. From there, they can access various subpages such as log1-sub.html. However, I am struggling to ...

html