I've got a button with some text in it, and the text is too long for the button so it's wrapping automatically to the next line. As I have a fixed button height, the second line of text in the button is hidden since overflow is not set to visible.
example
Is there a way to set the button to change its width and make it as long as the text inside?
My current css:
.block .btn {
background-color: #464646;
color: #fff;
border:none;
height: 30px;
font-family: 'Segoe UI';
font-size: 16px;
cursor: pointer;
}
.block .btn:hover{
background-color: rgba(40, 40, 40, 255)
}
EDIT:
Found my problem: there was some leftover styling for width set in the style="" property of the actual button in the HTML. There weren't any issues in the CSS itself. Thanks for the answers anyway!
Its a little hard to say exactly without more CSS or HTML provided...but this may be due to white space wrapping, try setting white-space to nowrap on the button
e.g.
button{
white-space:nowrap;
}
per MDN
The white-space CSS property is used to to describe how whitespace
inside the element is handled.
You're fixing the height of the button. Try using min-heightinstead in case the text needs more height.
Related
This is my problem in short: https://jsfiddle.net/b6wLwkfs/
Long story: I have a div with some text in it. It initially creates some space on top and bottom of my div (this is not padding). I would like my div to only cover the text and not create extra space. This is my only css:
div {
background-color: black;
color: white;
font-size: 50px
}
<div>This is the text</div>
What I am looking for is to narrow down the div to only contains the text without creating any space on top of bottom. I acknowledge that if you tweaking a bit with px, you will achieve that but I am looking for more generic approach since font size will be different by cases.
Your code below is missing a (;) after font-size: 50px; now to achieve the space reduction I suggest you use line-height with the same font-size refer to my correction
Your Code
div {
background-color: black;
color: white;
font-size: 50px
}
My Correction
div {
background-color: black;
color: white;
font-size: 50px;
line-height: 50px;
}
There is likely no 'generic' way to do this, as that spacing you're seeing is actually part of the font face, and whatever adjustments you make to solve the 'problem' for this font, will not necessarily work on other fonts.
For example, just take a look at how Arial displays, as it's different than the default font that is used without setting a specific font-family, and as such a fix for the default font would likely have to be adjusted for Arial.
p {
background-color: black;
color: white;
font-size: 50px;
line-height: 1;
font-family: arial;
display: inline;
}
<p>
Oh hi i'm different
</p>
In the above snippet I've added a line-height of 1 to help normalize the spacing a bit. You could try to adjust further with setting the line-height to be at, or close to the exact font-size in pixels, but this will likely result in undesired spacing if you have lots of text in the element (text should also be in an appropriately semantic element like a p, or li, not just in a div).
In the end, can you achieve the result you're looking for? Definitely. Using things like line-height, margins and/or transforms. But you are likely not going to find a silver bullet to achieve the effect you want, consistently, if swapping out font faces.
As Sebastian Brosch mentioned in the question's comments, working off from Is it possible to change inline text height, not just the line-height? is likely going to be your best path forward.
I have an issue while using custom font(poppins-regular.ttf). The issue is when I set background-color for span tag which is wrapper of text.
The words like g,y,.. etc got cut at the bottom. But, If I change the font-family from poppinsRegular to tahoma it looks good.
But the real issue here is i need to maintain same line-height
.passageBody, .passageBody2 {
width: 414px;
padding: 10px 0;
margin: 0px;
font-size: 24px;
line-height: 32px;
font-family: 'Poppins', sans-serif;
}
.passageBody2 {
font-family: tahoma;
}
.highlightPhrase {
background-color: yellow;
}
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div class="passageBody">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
<hr/>
<div class="passageBody2">
<span>“Good-bye to you and your funny feet.</span>
<span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span>
</div>
Example jsFiddle link here...
You can either remove the line-height property or try to set it in em units.
line-height: 1.5em;
Edit 1
If you don't want to change line-height, use vertical align with inline display
.highlightPhrase {
background-color: yellow;
display: inline;
vertical-align: text-bottom;
}
Edit 2
The above code might have visually changed the line height. So this example might be an elegant solution to your problem. Just wrap the content in another element and set the position to relative, so that background of each line will not hide the above line.
.highlightPhrase span {
position:relative;
}
or you can use some small image as background and repeat it to highlight entire text.
Problem here is the vertical placement of the glyphs.
Designer decided to set the font glyphs like that.
So, basically designer decided how much space there is below the baseline, and how much space is above the height of uppercase letters. Typically these spaces are equal, but they don't need to be.
I think that only solution for you is to put bigger line-height on the paragraph that is using that font or just choose a different font.
Change:
line-height: 32px; to line-height: auto;
Try this
.highlightPhrase {
padding:5px;
}
Ok so I found out that the text inside an <input> tag still gets cut off even though the <input> tag already has a padding. You'll notice it more when you set your font style to anything cursive.
Take a look at this image:
The first text box in the screenshot is an input of type=text and the second text box is just a div. The input text box cuts off the tail of character 'j', while the div text box does not.
HTML:
<input type="text" value="juvenescent" />
<div>juvenescent</div>
CSS:
input, div {
font-family: cursive;
font-size: 2em;
padding: 15px 20px;
margin-bottom: 10px;
width: 300px;
border: 1px solid black;
}
div {
background-color: white;
}
Here is a link to the jsfiddle:
https://jsfiddle.net/9eLzqszx
What would be the workaround here? Obviously, I want the padding of the input text box to NOT cut the text inside it.
It looks like the curve of the J goes past the left-hand side of what the browser considers to be the edge of the letter. Instead of using padding for both sides, use padding for top/right/bottom and instead use text-indent for the left, it should do the trick!
input {
font-family: cursive;
font-size: 2em;
padding: 15px 20px 15px 0;
font-style:italic;
margin-bottom: 10px;
width: 300px;
border: 1px solid black;
text-indent: 20px;
}
https://jsfiddle.net/will0220/pxrs321f/3/
An input element is a special element as it needs to cut and allow the user to navigate through its text. Its active text zone isn't increased by the padding, and that's why you're seeing this behavior. Firefox seems to be more clever than the bunch, as it doesn't vertically cut the text if the text's width is smaller than the input's active text zone.
A workaround would be to add text-indent and decrease padding-left:
text-indent: 5px;
padding-left: 15px; /* Originally 20px */
You can see it in a fiddle over here.
You could try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. However, that's probably a crappy hack if you want it to match the same size as your div.
Add height: auto; to your input type=text to keep flexibility, and change the padding to get the original effect, like this padding: 14px 20px;
Here's a jsFiddle with my situation demoed: http://jsfiddle.net/SFrbZ/4/
Basically, I want to have input fields in table cells and have the inputs set to a fixed height and font-size. What's happening now is that users are able to hover over or click on the input and using the mouse wheel can scroll the text up and partially out of frame. Highlighting the text also allows you to move it up. The following code shows the barebones of this issue as well:
HTML:
<input class="scroll" type="text" value="1"></input>
CSS:
.scroll {
display: table-cell;
width: 38px;
height: 8px;
font-size: 11px;
color: Black;
font-family: Calibri;
text-align: center;
background-color: rgb(182, 231, 201);
}
Oddly enough, this is only occuring on Firefox and not Chrome, IE, or Safari. As you can see in the jsFiddle, increasing the height of the field (or lowering the font-size) solves the problem, but this is not a viable solution for me.
I've tried a number of alterations in an attempt to fix it but have come up dry. Messing with overflow, line-height, padding, margins, display type, etc. and nothing seemed to do the trick. Any pointers or suggestions would be greatly appreciated!
Your best option is probably to install a Javascript handler for scroll events, on elements of class .scroll, which simply swallows the event and returns false -- this will prevent the element from being scrolled by any means, which should solve the problem as stated. This fiddle, using jQuery, demonstrates the solution, and the meat of it is as follows:
$(document).ready(function() {
$('.scroll').scroll(function(e) {
e.preventDefault();
return false;
});
});
Without jQuery, the solution is still feasible by means of window.addEventListener &c., but jQuery makes it so much simpler that, if you're not already using that library in your project, I'd recommend adding it just for this purpose.
The easiest solution is to change the line-height property of the .scroll css class to match the height. Using you're example:
.scroll {
display: table-cell;
width: 38px;
height: 8px;
line-height: 8px;
font-size: 11px;
color: Black;
font-family: Calibri;
text-align: center;
background-color: rgb(182, 231, 201);
}
The issue is that the text technically doesn't fit in that box. Text with a height of 11px usually has a couple of pixels on top and bottom as 'padding' to make it so that multi-line text has spacing between the lines. As a result, it appears the text fits, but it doesn't actually.
How to automatically change the space between the letters.I want the text to take up the entire width of the div. Text is not static. (Always changing text, can be 123" or "text text"...)
<style type="text/css">
#menu{
width: 200px;
background-color: #000;
color: #336699;
font-size: 16px;
letter-spacing: 100%;
}
</style>
<body>
<div id="menu">
tekstas
</div>
EDIT: Unfortunately this only changes word spacing, not letter spacing. There is not way to do kerning in CSS. Possibly CSS3, however.
This is easily accomplished with the text-align: justify CSS attribute:
#menu
{
width: 200px;
background-color: #000;
color: #336699;
font-size: 16px;
text-align: justify;
}
There is no way of doing this purely with CSS. The letter-spacing attribute doesn't take percent values. text-align: justify won't work either because it only affects the space between words, not the font kerning and it also only applies to those rows of text that are followed by another row.
You could try using JS to do this by counting the number of characters in a particular div and then calculate the needed space between the characters so it would fill out the width, but this solution would only work right with mono-spaced fonts (fonts that have the same width for all the characters).
Here's a solution will not work for everyone, but it turned out to solve the problem for me: if you are displaying a short amount of headline text, you can put a space between every character of every word "L i k e t h i s".
For my particular design, this happens to look fine, and of course it allows align: justify to fully do its magic within the div.