In my fiddle here, I would like to split the text into 2 lines. The splitting needs to be like in the image below:
The splitting needs to be according to the width of the image.
I tried playing with word-break but it seems that it needs width of the container to be defined.
Is there a way to fix this using CSS only?
jsFiddle
You can use the display: table-caption property to make an item fit the width its container already had without stretching it, and reset the white-space to make sure the lines actually break when it gets too wide:
span.item a{
text-decoration: none;
color: grey;
text-align: center;
display: table-caption;
white-space: normal;
}
Then add a vertical-align: top to your span.item to make them line up nicely.
Fiddle: http://jsfiddle.net/n4c24cg7/4/
Answer inspired by this answer.
) this should do the trick:
div.items div{
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.container {
white-space:nowrap;
}
.item {
width: 1%;
display: inline-table;
padding:0px 15px;
}
a {
height: auto;
overflow: hidden;
text-decoration:none;
white-space:normal;
}
http://jsfiddle.net/n4c24cg7/6/
the padding is only cosmetic, by the way, can be adjusted at will. it might also be worth looking into the 'ellipsis'property to stick to the layout: Setting a fixed HEIGHT on the boxes will chop off the text in this scenario... Depending on what browsers you are counting on and the size of the text/caption coming after the images -- right now they align with the highest ;) hope this helps
You can find solution from here
<div class="img">
<img src="image/path/img" alt="">
<div class="desc">Add a description of the image here blah blah blah</div>
</div>
css
div
{
width:100%;/*or specify width*/
}
div.img {
width:100%;
}
div.desc {
margin: 5px;
padding:5px;
word-wrap:break-word;
}
demo
Related
I'm switching divs from float:left to inline-block and don't know why some of the divs are displacing, like they have some invisible border or something.
Here are with float:left https://jsfiddle.net/f7op4dze/
div{
background-color: red;
width: calc(25% - 40px);
height: 50px;
float:left;
margin:0 20px;
}
And here with inline-block https://jsfiddle.net/dfdxa5hc/
div{
background-color: red;
width: calc(25% - 40px);
height: 50px;
display:inline-block;
margin:0 20px;
}
There's a space automatically added with inline elements and this space is applied to inline-block as well.
If there's no whitespace (either a space or a return) between the elements in your markup, the inline-block elements will be rendered without a space.
The easiest way to do this and still retain optimal formatting is using comment tags in between the <div> elements like so:
https://jsfiddle.net/orvn/wd0ynq98/2/
<section>
<div></div><!--
--><div></div><!--
--><div></div><!--
--><div></div>
</section>
As one possible option to fix the problem, set the font-size of the parent to 0.
section { font-size: 0; }
You can restore the font on the child elements:
div { font-size: 16px; }
Demo: https://jsfiddle.net/dfdxa5hc/3/
For an explanation and other possible solutions, see my answer here:
inline-block boxes not fitting in their container
There is (finally) a CSS only solution to this problem
section {
display: table;
word-spacing: -2em;
width: 100%;
}
div {
display: inline-block;
word-spacing: normal;
}
Wondering how I can make centered text's width the width of the text?
Highlighted in red, it shows that the width is 100%.
http://jsfiddle.net/kenhimself/ktkdypyo/
CSS:
h1 {
text-align: center;
font-size: 5vh;
line-height: 1;
white-space: nowrap;
background:red;
color:white;
}
Thanks in advance!
Change your HTML structure like below and apply style for h2 as well.
<div style="text-align:center"><h1>text is centered</h1><br />
<h1>but the width is 100%.</h1><br/>
<h1>How can I make it so that the width</h1><br />
<h1>is only the widht of the text?</h1>
</div>
CSS
h1 {
font-size: 5vh;
line-height: 1;
white-space: nowrap;
background:red;
color:white;
display:inline-block;
}
DEMO
http://jsfiddle.net/ktkdypyo/2/ you can add span inside h1 tag and then just give red color to span
html, body {
width:100%;
height:100%;
font-size:100%;
font-family:helvetica;
font-weight:normal;
font-style:normal;
}
h1 {
text-align: center;
}
span{
font-size: 5vh;
line-height: 1;
white-space: nowrap;
background:red;
color:white;
}
<h1><span>text is centered<span></h1>
<h1><span>but the width is 100%.<span></h1>
<br/>
<br/>
<h1><span>How can I make it so that the width</span></h1>
<h1><span>is only the widht of the text?<span></h1>
And your another question in the comments How can I make it so that when I hover over any of those texts, it fades out and gets replaced by a different text?
here is a working fiddle: http://jsfiddle.net/u7tYE/5060/
You need to wrap your text in a span and apply the background-color in span instead of h1. You can't use the same element because they are block-level element. You will need to put an inline-block element in a block-element to get the result you want.
For example
<h1><span>this is the entered text</span></h1>
CSS
span {
background: red;
}
Question is already answered but adding
margin: 0 auto;
display: table;
to the css gets the job done without changing the markup. I've tested it on ie, chrome, mozilla and opera, seems okay on all.
I'm looking an elegant way to position two divs one besides the other without line wrapping. The first div is an icon the second a text of unknown size.
They should not break in two lines but hide if not enough place. I'm trying with this example, but it doesn't work.
There is a similar question, but's it's not the same scenario as size is unknown.
Help is appreciated
Write like this:
.container {
white-space: nowrap;
}
.d1,
.d2{
display: inline-block;
*display:inline;/*for IE 7 */
*zoom:1;/*for IE 7 */
vertical-align:top;
}
.d1 {
background-color:#ff0;
}
.d2 {
background-color:red;
}
Check this http://jsfiddle.net/xcSXA/5/
float: left does not give you, what you need.
Try display: inline
http://jsfiddle.net/xcSXA/3/
Instead of floating your divs, display them as inline-block so they don't wrap. Also, set the container's "white-space" style to "nowrap" to also prevent line wrapping.
HTML
<div class="container">
<div class="d1">icon</div>
<div class="d2">This can be very very very very large.</div>
</div>
CSS
.container {
white-space:nowrap;
overflow:hidden;
width: 100px;
}
.d1 {
display: inline-block;
background-color:#ff0;
}
.d2 {
display: inline-block;
background-color:red;
}
Working Example: http://jsfiddle.net/C4Wfa/
.d1 and .d2 you have to give a certain width, but you gotta make sure that the width of both .d1 and .d2 together (+ margins and paddings) isn't bigger then the the container class, else they won't be able to be set next to each other.
I think, the following CSS is, what you need.
.container {
display:inline-block;
overflow:hidden;
white-space: nowrap;
}
.d1 {
display: inline-block;
background-color:#ff0;
}
.d2 {
white-space: nowrap;
display: inline-block;
background-color:red;
}
You can try it with
float: left;
and create an outer div with this style:
height: 1%; overflow: hidden;
See here: http://www.google.de/imgres?imgurl=http://www.mikepadgett.com/legacy/images/client_images/float_problem.gif&imgrefurl=http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/&usg=__NW1NVgWIKW-rBh0Cp60ouDdIGvg=&h=300&w=412&sz=6&hl=en&start=0&sig2=4nJ8a7o2JcYBdlBaPaL3VA&zoom=1&tbnid=raa9wIX8T8PbWM:&tbnh=103&tbnw=141&ei=uGlLT9j4MsWEhQfl7eGYBw&prev=/search%3Fq%3Dfloat%2Bleft%26um%3D1%26hl%3Den%26sa%3DN%26biw%3D1920%26bih%3D1075%26tbm%3Disch&um=1&itbs=1&iact=rc&dur=152&sig=110912085308513740608&page=1&ndsp=57&ved=1t:429,r:1,s:0&tx=64&ty=50
I have a series of buttons on my website that have I want to be at 100% width with a fixed column on the right and a flexible one on the left.
My first thought on how to do this was to use a liquid page layout and just use it on a div instead of the whole page. My results are below:
This image is what happens when the page is displayed so that the link can fit within the box.
If the page is scaled down however, I want the right column (set at 70px) to fill the entire height and align the text horizontally.
The code I am currently using to produce those results is this:
<li class="manage-files-list">
<div class="container">
<a class="right" target="_blank" href="">view</a>
<div class="left">
</div>
</div>
</li>
And
li.manage-files-list {
width: 100%;
display: table;
background-color:rgba(0,0,0,.05);
}
.container{
border-bottom:1px solid white;
color:#666;
text-shadow: 0 1px 0 #fff;
}
.left {
margin-right:70px;
word-break: break-all;
height:100%;
border-right:1px solid #fff;
}
.right {
width: 70px;
float: right;
text-align: center;
background-color:#333;
display:inline-table !important;
vertical-align: middle;
height:100%;
}
The only other requirement I can think of is that it needs to be wrapped in an <li> tag, but I don't see why that would be a problem.
Since it looks like you are okay using display: table*; values, here's a jsFiddle showing a solution using that.
It sets both .left and .right to display table cell, stops floating .right and instead moves it to be the second element. The issue was that your floating was causing the browser to ignore the height and the display property and just treat it as a floated block.
Also, making sure you are aware, these solutions using display: table*; are compatible IE8+
Although I don't really recommend using .left and .right as class names, the solution really only requires you to set overflow: hidden and word-wrap: break-word for your .left <div>.
.right { float: right; }
.left {
word-wrap: break-word;
overflow: hidden; }
Preview: http://jsfiddle.net/Wexcode/HzpJu/
I want to set vertical alignment of image inside a div. I use img { vertical-align:middle}
but it is not working.
Using the line-height property will solve the problem:
<style>
.someclass {
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
border: dotted;
}
.someclass img {
margin: auto;
vertical-align: middle;
}
</style>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
This is a solution that doesn't require JavaScript (as my previous solution did).
You can achieve what you want by assigning display: table-cell to the containing div. Here's an example: http://jsbin.com/evuqo5/2/edit
I feel I must warn you that you will need to test this in every browser you intend to support. Support for the table-cell value is fairly new, particularly in Firefox. I know it works in Firefox 4, but I don't know about any of the 3.x iterations. You'll also want to test in IE (I've only tested in Chrome 10 and Firefox 4).
The CSS:
div#container {
width: 700px;
height: 400px;
position: relative;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
div#container img {
margin: 0 auto;
display: block;
}
You won't need the div#container img styles if you don't also want to horizontally align the image.
If you're trying to do what I think, vertical align isn't going to work; you'll need to use positioning.
In general, position the container relative, and then position the image absolute, with top and left set to 50%, and then move the image back to the center by setting negative margins equal to half the width / height.
Here's a working example: http://jsbin.com/evuqo5/edit
Basic CSS is this:
#container { position: relative; }
#container img {
position: absolute;
left: 50%;
top: 50%;
margin-top: /* -1/2 the height of the image */
margin-left: /* -1/2 the width of the image */
}
See this awser: How to vertical align image inside div
If you want to align horizontally also, add the right and left, like this:
div {
position:relative;
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
The following post has some useful references:
Text Alignment w/ IE9 in Standards-Mode
Also, depending on which version of IE you are testing against, you may end up needing some browser-specific hacks or some jQuery/JavaScript code.
If you have to, use a one-row-one-cell table and take advantage of the vertical-align property. This is brute-force, not overly semantic, but it works.
If you set the div display attribute to table-cell then vertical-align: middle; will work.
The vertical-align rule only affects table cells or elements with display: table-cell.
See this article from SitePoint for a detailed explanation.
<style>
/* change body to .someClasses's parent */
body {
width: 100%;
height: 100%;
display: table;
}
body > .someclass {
width: 300px;
height: 300px;
text-align: center;
border:dotted;
margin: 0 auto
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
</body>