I have a bolded text block where I'd like to control the size of. Unfortunately, it appears to be resisting every effort to constrain its (actual) size. My goal is to have it to do ellipsis on text overflow but that's not happening because it just extends off-screen. It does get properly cut off by the boundary of the parent but that doesn't look elegant.
I have searched online for a solution but I don't see anything useful due to the immense amount of noise associated with the keywords I use (i.e. span, override width, b element, etc). I have made a sample code below to illustrate my problem (where span and b elements resist width overrides)
<body>
<b class="token_actor_cell" title="(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" style="
/* width: 100px; */
padding: 1px;
margin: 1px;
color: brown;
max-width: 100px;
word-wrap: break-word;
">(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</b>
<span class="token_actor_cell" title="(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" style="
/* width: 100px; */
padding: 1px;
margin: 1px;
color: blue;
max-width: 100px;
word-wrap: break-word;
">(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</span>
<p class="token_actor_cell" title="(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" style="
/* width: 100px; */
padding: 1px;
margin: 1px;
color: green;
max-width: 100px;
word-wrap: break-word;
">(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
</body>
I suppose I can change my element type to p but I kinda prefer to stick with my original element type if possible.
Input on this would be appreciated. I am pretty sure it is a well-understood issue.
You should play around with the "display" property.
If you want it to behave like a <p> Tag you should use display: block;. If you want to keep the inline behaviour of your elements you should use display: inline-block;. Then they will listen to your width.
By default inline elements (like span and b) don't have width. To make them adjust to a width you need them to float either left or right. This will create a block box around them.
You example with float left http://jsfiddle.net/0ja257L9/
.token_actor_cell{
float: left;
}
Or you can use display: inline-block for the inline elements :)
What about:
<b class="token_actor_cell" title="(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" style="
width: 100px;
padding: 1px;
margin: 1px;
color: brown;
display:block;
text-overflow: ellipsis;
overflow:hidden">
(AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</b>
Seems to work for me.
Related
i have this button where if i give width="140px" and content is big it goes outside div.
i want content to auto fit to given div.
i tried lot but nothing working,
<div id="pushdaddy-button" class="pushdaddy-button" style="width:140px;height:30px;border-radius: 8px;bottom: 20px;right:2%; ; ;background-size: auto;background-position: center;background-repeat: no-repeat; ; ; ;;"><div class="pushdaddy-button-label" id="pushdaddy-button-label" style="color:#F2CA80; ;margin:0 34px;padding:4px 4px; ;; ; right: unset; background-color: transparent;color: #F2CA80;box-shadow:none; font-size: 16px; ">Chat with us 976654654444</div></div>
content is Chat with us 976654654444
and chat with us fits in 140 px but when we add some more text it goes outside of div which looks ugly
any help in solving this issue so that text always fits in div will be great.
i tried
display:inline-block
width:auto
and several other combination but nothing worked
here is screenshot how it looks
i want it to be fit in div. 140px is not the constraint. i want text to fit in whatever width it takes. but should be in one line. not in multiline
You're almost there with display: inline-block, but as you can see, allowing the button to determine its own width makes supporting arbitrary labels difficult.
.btn {
display: inline-block;
width: 140px;
border-radius: 10px;
}
.btn-primary {
background-color: purple;
color: white;
}
<div class="btn btn-primary">Chat with us 976654654444</div>
Instead, you can remove the width and let the label decide how wide the button should be. Here I've used padding to place some space around the width of the text.
.btn {
display: inline-block;
padding: 10px;
border-radius: 10px;
}
.btn-primary {
background-color: purple;
color: white;
}
<div class="btn btn-primary">Chat with us 976654654444</div>
You can still support widths with this approach, but you should switch to max-width and make sure it's only used when you need to prevent the button from taking up all the room in your template.
Here I've added a max-width to keep the button at 200px or below, but I have also had to add:
overflow: hidden to prevent the text from flowing out of the button
white-space: nowrap to prevent the text from forming multiple lines
text-overflow: ellipsis to prevent the text from being cut off by the end of the button
.btn {
display: inline-block;
padding: 10px;
max-width: 200px;
border-radius: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-primary {
background-color: purple;
color: white;
}
<div class="btn btn-primary">The label for this button is too long and would intrude on other parts of the template</div>
Still developing my html5/css3 mobile site, I have trouble adjusting the height of a div to its parent.
http://jsfiddle.net/1eg2cwLs/
The fiddle doesn't exactly look like this because I'm using webfonts (saved offline though as I'm not going to have internet connection on the target system). But the problem remains the same.
You might be seeing what the problem is right from the spot, if not: I would like the green and red bar (.itemclass) always have the same size as the content of its parent (.item).
Depending on font, its size (still playing around with it) and the overall height of each item, I have to precisely adjust the negative margin. Otherwise it looks like in the screenshot. The negative margin I just mentioned is in the CSS-class .itemclass: (marked with an arrow also in the fiddle)...
.itemclass {
height: 100px;
width: 50px;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: -27px; /* <=== */
display: inline-block;
}
This cannot be the solution. I tried a lot of stuff and I only got it "working" the way I mentioned.
Any better idea how to make it look clean without a hack?
As well, tips for other improvements regarding my html/css are well appreciated.
Sorry for appending the entire code into the fiddle. I don't know whether it was representative if I was going to remove stuff.
Best regards
I'd probably go this route:
.item {
position: relative;
...
}
.itemclass {
position: absolute;
top: 0;
bottom: 0;
...
}
.itemcontent {
margin-left: 50px;
...
}
Demo
Really big font demo
Consider a reasonable min-width for the body to prevent .tagline from overlapping, etc.
You can set .item's margin-top to 0, and instead adjust the margin-top of .vcenter:before. This way you're just adjusting the text and not the div.
Or you could drop the static height and width of .itemclass altogether. Now the .itemclass will scale.
http://jsfiddle.net/1eg2cwLs/5/
.item {
width: 100%;
height: auto;
background-color: #eeeeee;
border-bottom: 1px solid #cccccc;
overflow: hidden;
}
.itemclass {
height: 100%;
width: auto;
background-color: #27ae60;
vertical-align: middle;
text-align: center;
color: white;
font-size: 2em;
margin-top: 0;
display: inline-block;
}
As a fallback, you can set .item to not show overflow, and then adjust the line-height of :
.item {overflow:hidden}
overflow: hidden; is your best friend in this case! It hides any overflow content from view outside of .item
Add it into .item {} declaration.
http://jsfiddle.net/1eg2cwLs/1/
I have spent countless hours yesterday and today to figure out how to do this. I cant believe CSS doesn't have an easy way to handle this.
Essentially, I have some text within a span class="name" whose length is not fixed. In certain instances, it can spill over to the next line. How do I vertically align this within my container.
More specifically, how do I vertically align "ABC Father And Sons Company LLC" within my container?
http://jsfiddle.net/D3L8S/
<div class="container">
<span class="name">ABC Father And Sons Company LLC </span>
Address
Hours
More
</div>
css classes
// CSS
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height:18px;
line-height:18px;
display:inline-block;
}
.name {
width:200px;
float:left;
}
.addr, .hours, .more {
width:60px;
float:left;
}
If I add a negative top margin to "name" (margin-top:-8px), I can achieve this but it obviously messes up rendering for XYZ Company LLC
http://jsfiddle.net/FM4dA/
The solution should ideally be Cross-browser compatible (atleast ie8 should support it)
EDIT - I forgot to mention initially that my container width is fixed and cannot be changed.
Here is one way of doing it using inline blocks:
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
height: 50px;
line-height: 50px;
margin-bottom: 10px;
display:inline-block;
}
.name {
width:200px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.addr, .hours, .more {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
First, make sure to leave enough vertical space for multi-line names, so on .container,
I used height: 50px and line-height: 50px.
However, you need to reset the line-height: 1 (or some suitable value) on the child elements otherwise the interline spacing will not be attractive.
Then, instead of floats, use display: inline-block and vertical-align: middle on the
child elements (.name, .addr, .hours, .more).
See demo at: http://jsfiddle.net/audetwebdesign/Wp84v/
Note: You may not need to specify the width on .addr, .hours, .more, so I let the
widths take on the shrink-to-fit value.
One way to vertically align div's contents is to use the vertical-align css property. But it works only on display:table-cell elements. So, wrap your container into a display:table div, and change the container display to display:table-cell.
Like this: http://jsfiddle.net/D3L8S/2/
Try this, It might help somebody
.name {
width:200px;
float:left;
margin-top:-8px;
word-wrap:break-word;
text-align: center;
}
DEMO
When you want to vertically center multiple lines, put the text into an inline block then pretend that the inline-block was a single line of text.
.container {
background: #DDEBF0;
padding: 11px;
border: 1px solid #D2D2D2;
width: 380px;
margin-bottom: 10px;
height: 18px;
line-height: 18px
display:inline-block;
}
.name {
width:200px;
float:left;
margin-top:-8px;
display: inline-block;
vertical-align: middle;
line-height: 14px;
}
NOTE:
Why you should add the line-height property ?
If you add height to an element , where exactly does the text inside of it lie? That is, if you have a block of text that is font-size: 10px (a theoretical height:10px) inside a container that is 60px where exactly is the text going to end up? Most surely at the top of the container, because the text can only position itself where the text flows, inside a height:10px space. But you can overcome that by using a line-height value the same height as the container, this way the text will take in the vertical-align property and align itself properly.
I want to create two DIVs, a container DIV (which contains arbitrary content) and an arrow DIV which allows the user to scroll the content horizontally.
Ignoring the Javascript aspect, the basic layout and CSS could be something like:
<!DOCTYPE html>
<html>
<head>
<style>
.outer-wrapper {
min-width:275px;
overflow: hidden;
border: 1px solid #000000;
height: 40px;
}
.container {
width: 90%;
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
.inner-content {
margin-top: 10px;
white-space: no-wrap;
position: relative;
display: inline-block;
white-space: nowrap;
}
.inner-element {
display: inline-block;
}
.arrow {
margin-top: 12px;
min-width: 30px;
font-size: 10px;
text-align: right;
margin-right: 2px;
}
</style>
</head>
<body>
<div class = "outer-wrapper">
<div id = "container" class = "container">
<div class = "inner-content" id = "inner-content">
Options Options Options Options Options Options Options Options Options
</div>
</div>
<div id = "arrow" class = "arrow">
▶
</div>
</div>
</body>
</html>
Here's a jsfiddle link showing the rendering: http://jsfiddle.net/RSTE9/1/
The problem I have is that, ideally, I'd like the DIV containing the arrow to be as small as possible, so that most the width of the screen is comprised of the container DIV.
To achieve this, I thought I'd set the container DIV to a width of like 98%, and the arrow DIV to a width of like 2%. Unfortunately, this causes the arrow DIV to wrap to the next line on smaller screen sizes.
The essential problem is that I want the arrow DIV to always take up a very small portion of the screen, but I can't find a way to do this using percentages. If the screen width is large, the arrow DIV always takes up too much space. But if the screen width is very small (say on a mobile device), the arrow DIV might be pushed to the next line. I played around with different percentage values, but there's seemingly no way to get an ideal value. I settled at a width of 90% - this looks good on small screens, but on a large screen it means the arrow DIV is taking up 10% of the screen!
I was thinking of using CSS3 media queries to adjust the percentages dynamically, but I am wondering if there is some easier solution that I'm just not thinking of.
I would suggest that using css calc would be the answer:
CSS Calc on MDN
give the arrow div a fixed size and the container a calc(100%-30px):
.container {
width: calc(100%-30px);
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
Here is an example on jsFiddle:
http://jsfiddle.net/RSTE9/5/
Notice I removed a few of the options options so you can see the effect better.
You do have a minimum width on the main container, which prevents more collapsing.
Why not set width of container as "*"?
.container {
width: *;
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
jsFiddle: http://jsfiddle.net/RSTE9/6/
seems like you messed a bit with float , display and white space.
display and white space is a good clue, width a little less.
the idea is:
set the block container width no width nor overflow, but margin and white-space,
for inner content, reset white-space to normal , use display instead float.
Set min-width to text-content (100% - margin given to container)
Finally , vertical-align on both inline boxe containers text + arrow.
.outer-wrapper {
min-width:275px;
white-space: nowrap;
margin:0 1%;
}
.container {
min-width:98%;
margin-left: 0.5em;
margin-right: 0.5em;
min-height: 40px;
vertical-align:middle;
border: 1px solid #000000;
display:inline-block;
white-space:normal;
}
.arrow {
font-size: 10px;
width:1em;
text-align: right;
display:inline-block;
vertical-align: middle;
}
http://jsfiddle.net/GCyrillus/2e3du/1/
Example
If the adjacent element of a parent floating, the parent does not feel the width of the element, if it is dynamic. In chrome and opera works fine.
<div class="b-wrap">
<div class="b-content">
<div class="b-rect-left"></div>
<div class="b-rect-right"></div>
<div class="b-child-cont">джигурдаололо</div>
</div>
</div>
.b-wrap {
background-color: red;
height: 50px;
float: left;
}
.b-content {
margin: 5px;
overflow: hidden;
}
.b-rect-left {
width: 40px;
height: 40px;
float: left;
background-color: orange;
}
.b-rect-right {
width: 30px;
height: 30px;
float: right;
background-color: green;
}
.b-child-cont {
overflow: hidden;
}
Firefox calculated the width of an element that contains floats differently from Chrome. I don't know why.
However, what seems to be happening is the following.
The actual content in your snippet is in b-child-cont, a non-floated element. b-child-cont determines the width of b-content since the two other elements are (b-rect-left and b-rect-right) are floated and do not factor into determining the width of the content. In turn, the width of b-content sets the width of b-wrap, because b-wrap is floated and takes on the width of its child elements.
You as a designer and developer, need to allow some space for the two floated elements. You can do this in many ways. I will give two examples.
(1) Add left and right margins to b-child-cont:
.b-child-cont {
overflow: hidden;
background-color: yellow;
margin-left: 40px;
margin-right: 30px;
}
(Note: I added a background color to show the extend of the element.) The 40px and 30px values are based on the widths of the left and right square elements respectively.
(2) You can also specify a with to the parent element containing the floats:
.b-child-cont {
overflow: hidden;
background-color: yellow;
text-align: center;
}
.b-content {
width: 30em;
}
In this case, I set the with of b-content to 30em (you can adjust this accordingly) and I centered the text in b-child-cont.
You have come across a cross-browser discrepancy in how the CSS box model is calculated. Once you are aware of it, you need to design around it, but that is not too hard to do.
Fiddle Reference: http://jsfiddle.net/audetwebdesign/dzK73
Just add this firefox exception
#-moz-document url-prefix() {
.b-wrap{width:175px;}
}