Is there a way to use CSS hide a word at a time (instead of a letter at a time) when an element isn't wide enough to show it's text content?
For example, with the following code, when the browser window gets to narrow to show the entire sentence, I want it to show Lorem ipsum dolor sit... instead of Lorem ipsum dolor sit ame...
HTML:
<div>Lorem ipsum dolor sit amet</div>
CSS:
div { overflow:hidden; text-overflow:ellipsis; white-space-nowrap; }
(I don't need to support old browsers)
You could always just force your container to have the same height as a single line of text, and just hide whatever text wraps beneath that line using overflow: hidden.
/* hide one word at a time */
p.short {
height: 18px;
overflow: hidden; }
/* display an ellipsis "..." */
p.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
http://jsfiddle.net/Wexcode/fbhxL/
Related
I need to create a text that adapts to the size of its container DIV, distorting itself to always fill the whole space inside the DIV. So it should be always width=100% and height=100% and resize according to the browser window.
I know this can be done with an image, my doubt is if there is any way to do the same to a editable text, deforming the font shapes itself. Which property should I use?
Thank you in advise.
Option 1
We are going to use Javascript to change dynamically the font-size and line-height
First, cache the div so that the browser doesn't have to find it every time the window is resized.
var $div = $('.foo');
Run the following when the window is resized, and also trigger it once to begin with.
$(window).resize(function () {
Get the current height of the div and save it as a variable.
var height = $div.height();
Set the font-size and line-height of the text within the div according to the current height.
$div.css({
'font-size': (height/2) + 'px',
'line-height': height + 'px'
})
}).trigger('resize');
Demo: https://jsfiddle.net/nanilab/6tpztvnc/
Option 2
You can use FitText.js
FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
Option 3
You can use slabText.js
A jQuery plugin for producing big, bold & responsive headlines
Check out the CSS Viewport percentage lengths, this might be what you're looking for: https://css-tricks.com/viewport-sized-typography/
I put together a quick container with text that will change size based on the size of the viewport. You can check it out here: http://codepen.io/sktwentysix/pen/GZzvEx
<div class="main">
<p>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum!
</p>
</div>
.main {
border: 1px solid #000;
padding: 1rem;
width: 80%;
height: 500px;
}
p {
margin: 0;
font-size: 4vw;
}
Hope this helps!
only CSS will not be possible unless the lenght of your text is known.
If it is known, vw units + transform will do .
Problems : long text on small window could be too small to be read
Short text on large screen will be awfully stretched
h1 {
height: 3vw;
background: #147EBD;
text-align: center;
}
span {
display: inline-block;
height: inherit;
line-height: inherit;
font-size: 10vw;
transform-origin: top center;
transform: scale(1, 0.3);
}
h1 + h1 span {
line-height: 40vw;
font-size: 40vw;
transform: scale(1, 0.08);
}
<h1> <span>longer text to strecth </span></h1>
<h1> <span>short</span></h1>
As you can see, javascript will be needed to find out text lenght before to apply a font-size and a proper scale to start with .
It would be wise somehow to still set a max and min font-size so it remains readable at anytime time, and eventually let break a line on small screen.
edit: i did understand 100% of container, not window's height but scale() will do also in this case.
I use padding and a negative text-indent to create an indented layout for responsive forms but now want to make the bottom paragraph a block level element so it always wraps.
The layout works fine when the bottom row is display inline or inline-block but as soon as the bottom row is display block then the entire layout in Chrome changes.
I don't know which browser is right, but it is Firefox's interpretation of the layout that I am after.
This is a simplified version of a layout I use for forms to attempt to fix this problem.
http://codepen.io/rachelreveley/pen/rxxxRj
<div>
<div>
<p class="top">Lorem ipsum dolor sit amet</p>
<p class="bottom">Lorem ipsum dolor sit amet</p>
</div>
</div>
<style type="text/css">
div div {padding-left: 36%; margin: 0; text-indent: -18%; background-color: #cee; width: 300px;}
p {text-indent: 0;}
p.top {display: inline-block; background-color: #ffc;}
p.bottom {display: block; width: 200px; background-color: #fcf;}
</style>
Real world example of how this code is being used.
I have fixed this by changing from using padding to margin on the parent container and then adjusting the sizes after that.
In this example I'm using flex-direction:row
http://jsfiddle.net/9a1d2ddz/
When space is not enough to fit elements, a vertical scrollbar appears
I want to achieve the same, but with "top to bottom" box ordering
http://jsfiddle.net/ebd8rsnx/
but instead of getting an horizontal scrollbar I want to keep the vertical one
basically the same of the above, but with top to bottom box ordering instead of left to right
I thought it was something I could do with max-height:min-content but it seems to have no effect.
thank you in advance
div
{
overflow:auto;
border:2px blue solid;
box-sizing:border-box;
flex-direction:column; /* try column|row */
display:flex;
flex-wrap:wrap;
}
span
{
min-width:150px;
min-height:150px;
flex:1 1 auto;
border:1px red solid;
display:block;
overflow:hidden;
box-sizing:border-box;
}
I tried specifying the overflow direction, but that doesn't seem to work in this case. I think the problem is that you're trying to make your overflow direction as your wrap direction.
for example, try making it do the same type of thing horizontally. It'll create the same problem because you are attempting to flow and overflow in the same direction. That said, I don't think you'll be able to do what you want with straight css. You may want to consider a js tool like Columnizer or Masonry. The reason being that it can't just flow. It needs to calculate the columns first, then adjust the elements to fill in the columns before it determines its content length in the overflow direction. With a flow, there's no way for a browser to determine when it should break to a new row/column if your overflow is in the same direction as your flow. I've made something like this work before, working horizontal, but the way it worked was to put everything into 1 row, which isn't what you're really going for here.
CSS3 "column" feature works well for me:
http://caniuse.com/#feat=multicolumn
The column content can be anything, not text-only. Set column-width on the div containing the content, and wrap it into another div with fixed height.
.columns-container {
max-height: 50vh;
overflow-y:auto;
}
.columns {
-webkit-column-width: 15em;
-moz-column-width: 15em;
column-width: 15em;
/*optional column-count*/
/*
-webkit-column-count:4;
-moz-column-count: 4;
column-count: 4;
*/
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
<div class="columns-container">
<div class="columns">
<div>Lorem ipsum dolor sit amet. Sample text 1</div>
<div>Lorem ipsum dolor sit amet. Sample text 2</div>
...
<div>Lorem ipsum dolor sit amet. Sample text 1000</div>
</div>
</div>
How can I constrain the width of a child within an inline-block element?
Assume that I am targeting newest browsers.
Given an element displayed using inline-block, how can I constrain a child element so that it does not scale beyond the parent's witch.
In practical terms, I am trying to built a system that will take an image of any width and keep the caption constrained to the width of the parent container:
without having to specify width
without using jQuery or other DOM manipulation
CSS
<style>
div {
width:800px;
background-color:silver;
text-align: center;
}
figure {
display:inline-block;
background-color: orange;
padding: 1em;
margin: 0;
}
figcaption {
background-color:pink;
}
</style>
HTML
<div>
<figure>
<img src="http://i.techrepublic.com.com/blogs/11062012figure_a.gif" />
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</figcaption>
</figure>
</div>
In my opinion adding the following code can help you:
figure {width: 100%;}
img {width: 100%;}
In any case if you want to do this only with CSS, then you need play with percentages.
I know there are a few questions about similar topics but they mostly amount to floating the div/image. I need to have the image (and div) positioned absolutely (off to the right) but I simply want the text flow around it. It works if I float the div but then I can't position it where I want. As it is the text just flows behind the picture.
<div class="post">
<div class="picture">
<a href="/user/1" title="View user profile.">
<img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp's picture" title="neatktp's picture" />
</a>
</div>
<span class='print-link'></span>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
</div>
Is an example of the HTML
With the CSS being:
.picture img {
background: #fff;
border: 1px #ddd solid;
padding: 2px;
float: right;
}
.post .picture {
display: block;
height: auto;
position: absolute;
right: -10px;
top: -10px;
width: auto;
}
.post {
border: 1px solid #FFF;
border-bottom: 1px solid #e8ebec;
padding: 37px 22px 11px;
position: relative;
z-index: 4;
}
It's a Drupal theme so none of this code is mine, it's just that it's not fully working when it comes to putting a picture there.
I know this is an older question but I came across it looking to do what I believe you were trying to. I've made a solution using the :before CSS selector, so it's not great with ie6-7 but everywhere else you should be good.
Basically, putting my image in a div I can then add a long thing float block before hand to bump it down and the text wraps merrily around it!
img {
float:right;
clear:both;
width: 50% ;
margin: 30px -50px 10px 10px ;
}
.rightimage:before {
content: '' ;
display:block;
float: right;
height: 200px;
}
You can check it out here:
http://codepen.io/atomworks/pen/algcz
Absolute positioning takes the element out of the normal document flow, and therefore it does not interact with the other elements. Perhaps you should revist how to position it using float instead, and ask about it here on Stack Overflow if you get stuck :)
As mentioned by #Kyle Sevenoaks, you are taking absolute positioned content out of the document flow.
As far as I can see, the only way to have the parent div wrap the absolute positioned contents, is to use javascript to set the width and height on each change.
When you position a div absolutely, you're effectively taking it out of the document flow, so the other elements will act as if it's not there.
To get around this, you can instead use margins:
.myDivparent
{
float: left;
background: #f00;
}
.myDivhascontent
{
margin-left: 10px; /*right, bottom, top, whichever you need*/
}
Hopefully that will do the trick :)
In my opinon, the "Absolute" trait is poorly named, because its position is actually relative to the first parent whos position is not static
<div class="floated">
<div style="position: relative;">
<div class="AbsoluteContent">
stuff
</div>
</div>
</div>
I think the best option is to add an additional div after the float content, but still inside the parent to clear previous styles.
<div class="clear"></div>
And CSS:
.clear
{clear:both;}
I needed a similar solution to float a pullout quote (not an image) which would have variable length text inside. The pullout quote needed to be inserted into the HTML at the top (outside the flow of the text) and float down into the content with text that wraps around it. Modifying Leonard's answer above, there is a really simple way to do this!
See Codepen for Working Example: https://codepen.io/chadwickmeyer/pen/gqqqNE
CSS
/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
content: '' ;
display:block;
float: right;
/* The height is essentially a "margin-top" to push the pullout Container down page */
height: 200px;
}
.pulloutContainer q {
float:left;
clear:both;
/* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
width: 30%;
/* Add padding as you see fit */
padding: 50px 20px;
}
HTML
<div id="container">
<div class="pulloutContainer">
<!-- Pullout Container Automatically Adjusts Size -->
<q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
</div>
<div class="content">
<h1>Sed Aucteor Neque</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</
...INSERT MORE TEXT HERE...
</div>
</div>
Absolute positioning does not let you wrap text. You have to use float and position using margin or padding.
Here's a trick that might work for some:
if you have a container packed with a lot of objects, and you want that positioned object to appear up high in certain cases, and down lower in other cases (various screen sizes for example), then just intersperse copies of the object multiple times in your html, either inline(-block), or with float, and then display:none the items you dont want to see according to the conditions you need.
Here is a JSFiddle to show exactly what I mean: JSFiddle of right positioning high and low
Note: I added color only for effect. Except for the class names, the subject-1 and subject-2 divs are otherwise exact copies of each other.
There is an easy fix to this problem. It's using white-space: nowrap;
<div style="position:relative">
<div style="position: absolute;top: 100%; left:0;">
<div style="white-space:nowrap; width: 100%;">
stuff
</div>
</div>
</div>
For example I was making a dropdown menu for a navigation so the setup I was using is
<ul class="submenu" style="position:absolute; z-index:99;">
<li style="width:100%; display:block;">
Dropdown link here
</li>
<ul>
Image Examples
Without Nowrap enabled
With Nowrap enabled
Also if you still can't figure it out check out the dropdowns on bootstrap templates which you can google. Then find out how they work because they are using position absolute and getting the text to take up 100% width without wrapping the text.