I am trying to create a div element with fixed size in html. My problem is, the above div receives input text from backbone. The size of text is unknown, so every time that the transmitted text is big, automatically the size of the div is change. How is it possible to display only the first words of the text that fit in the predefined bounding box of the div???
My css code
.hashTagsCloud {
max-width: 500px;
max-height: 400px;
overflow: hidden;
}
And html code:
<div class= "hashTagsCloud span4 offset1 "> //bootstrap
<div id="profiles> //backbone view
<script id="profileTemplate" type="text/template">//backbone template
</script>
</div>
</div>
I take data with getElementById.
You can use the overflow: hidden; property, granted that you set a width and height on the div already.
<style type='text/css'>
.text {
width: 100px;
height: 18px;
overflow: hidden;
white-space: pre-line; /* breaks up the text on spaces before hiding */
}
</style>
<div class='text'>some really really really long text</div>
In the CSS for the Div Element, you could use
overflow: hidden
you can use from this text-overflow: ellipsis; of css, check this
Related
I have a DIV container that has a paragraph and another inner DIV displayed in line.
Inner DIV is unknown but it's always the same and not gonna change. I can sent min-width if needed. Now based on outer DIV size I need to either cut (with three dots) or show full paragraph string. But I have to set paragraph width in css to show that three dots when outer div size is too small.
<div className="divOuter">
<p>very long string</p>
<div className="divInner">some div stuff</div>
</div>
.p {
position: relative;
float: left;
text-overflow: ellipsis;
overflow: hidden;
width: ?????; // what do I set here?????
white-space: nowrap;
}
.divInner {
display: flex;
float: right;
align-items: center;
}
|--------------------------------------|
|very long string some div stuff|
|--------------------------------------|
need to get this when outer DIV resized:
|------------------------------|
|very long st... some div stuff|
|------------------------------|
|--------------------|
|ve... some div stuff|
|--------------------|
This is what you are looking for.
You don't need to give any width to the long string p element.
There is a property of flexbox called flex. When you set this to 1, it will elongate that element to take up the remaining horizontal space in the parent.
After that, you just have to give text-overflow: ellipsis; overflow: hidden; to make the ... appear.
Run the below snippet to see it working.
.divOuter {
display: flex;
width: 100%;
}
.longString {
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.divInner {}
<div class="divOuter">
<p class="longString">very long string very long string very long string very long string very long string</p>
<p class="divInner">some div stuff</p>
</div>
I have a situation beyond my immediate control (library-related) where text in an HTML div goes beyond its enclosing bounding box. I give a simple example below, although in my case it is a div within a <foreignObject> inside a <g> within an <svg>...
In the example below, is there a way to programmatically detect if the text goes beyond its bounding box? Getting the size of the enclosed <div> and its associated parent seems to return the same width, which is NOT the width of the text.
<!doctype html>
<html lang="">
<head>
<style>
.container {
background: yellow;
border: 2px solid black;
width: 200px;
height: 100px;
}
.tooBig {
white-space: nowrap;
}
</style>
<script>
function figureOutSizes() {
let container = document.getElementById("my-container");
let contBound = container.getBoundingClientRect();
console.log(`Container size: ${boundToString(contBound)}` );
let tooBig = document.getElementById("tooBig");
let bigBound = tooBig.getBoundingClientRect();
console.log(`text size: ${boundToString(bigBound)}` );
}
function boundToString(rect) {
return `rect(w=${rect.width}, h=${rect.height})`;
}
</script>
<meta charset="utf-8">
<title>Out of bounds</title>
</head>
<body>
<div id="my-container" class="container" >
<div id="tooBig" class="tooBig">This line is too big for its containing div! What am I going to do?</div>
</div>
<div>
<button onclick="figureOutSizes();">Get sizes</button>
</div>
</body>
</html>
You can use scrollWidth and scrollHeight instead of getBoundingClientRect:
function figureOutSizes() {
let container = document.getElementById("my-container");
let contBound = container.getBoundingClientRect();
console.log(`Container size: ${boundToString(contBound)}`);
let tooBig = document.getElementById("tooBig");
let bigBound = {
width: tooBig.scrollWidth,
height: tooBig.scrollHeight
};
console.log(`text size: ${boundToString(bigBound)}`);
}
function boundToString(rect) {
return `rect(w=${rect.width}, h=${rect.height})`;
}
.container {
background: yellow;
border: 2px solid black;
width: 200px;
height: 100px;
}
.tooBig {
white-space: nowrap;
}
<div id="my-container" class="container">
<div id="tooBig" class="tooBig">This line is too big for its containing div! What am I going to do?</div>
</div>
<div>
<button onclick="figureOutSizes();">Get sizes</button>
</div>
Getting only text width
If you only want to detect if a string goes out of its parent element, the best way is to do it with the jQuery element.width() method where you put the string inside a span, because the div element automatically gets a 100% width by default.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='tooBig' style='white-space: nowrap;'>This string is too long ...</span>
<script>
var x = $('#tooBig').width();
console.log("Text width: "+x);
</script>
Now, you can compare it to the container's width and check if the string is wider than its parent.
If you want to avoid wrapping, add the white-space: nowrap; CSS style for the parent span or use character encoding instead of spaces.
Wrap string automatically with CSS
I suppose your purpose is not only to detect if the text flows out of a div, rather to wrap the string, so there is a quite elegant CSS method for this. The technique uses flexbox, test-overflow: ellipsis and overflow: hidden and the behaviour of string overflow. You do not need to use any kind of JavaScript for it, the text wraps and get the ... ending automatically.
/* Text is a header now,
so need to truncate there for it to work */
.flex-child > h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Text is directly within flex child,
so doing the wrapping here */
.flex-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="flex-parent">
<div class="flex-child">
<h2>Resize the window to see how this very very long text gets resized...</h2>
</div>
</div>
Reference
CSS Flexbox Resize
jQuery text width
I've been looking for a simple CSS solution to make a texarea match height to its content.
I DO NOT want an auto resizing textarea that changes as you type. I have a textarea with text already in it and I want it to match the content.
Is there any way to do this using CSS?
No, because, by definition, a textarea isn't sized according to its content.
You could however, use a <div contenteditable="true"></div> and style it to look and act like a textarea.
.textarea {border:1px solid #e0e0e0; max-height:100px; overflow-y:scroll;}
<div contenteditable="true" class="textarea">jdsklf ;askf; fs;dlfkj sad;flkasdj f;laskfj as;lfkajsd f;lasdkfj asl;dkfj sad;lfkasjd f;laskdjf a;sldfkj asdf;lkasdjf ;lasdkfj asd;lfkjsad f;laksdjf ;alsdkfjs ad;lfkjsad f;lksadjf ;lasdkfjasdl;fk jasdl;fkj asdf;lksadj f;lsadkfj sad;lfkjsd f;lksadjf; lsadkfjsda;lfk jsd;lfk jsdf</div>
Here's a 100% css way to do it.
https://codepen.io/anon/pen/BxLMKK
Note that for this demo I did a simple 2-column layout just to provide context, but the actual important part is just in the .textbox-mimic div.
html:
<div class="container">
<div>
<div class="textarea-mimic">
<span>
Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here.
</span>
<textarea>Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here. Here's some text that's already here.
</textarea>
</div>
</div>
<div>
Some things over here
</div>
</div>
CSS:
.container {
outline: 2px solid #000;
display: flex;
width: 500px;
height: 100%;
margin: 0 auto;
}
.container > div {
flex: 1;
outline: 1px solid #cc00cc;
padding: 8px;
}
.container > div > .textarea-mimic {
position: relative;
}
.container > div > .textarea-mimic > span {
visibility: hidden;
}
.container > div > .textarea-mimic > textarea {
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 0;
bottom: 0;
font: inherit;
overflow: hidden;
resize: none;
/* display: none; */
}
So basically what's happening here is that we're populating the content of the textarea and another sibling (span in this case) with the same content. The styling of the text area is updated to have the same font, padding, etc as the div. Depending on your specific needs, you just updated these as you see fit. But its critical they match so that the spacing and layout are identical.
Then we set some properties for the textarea to make it position absolute and to adopt the dimensions of the parent. Finally, the content of the .textarea-mimic > span is set to visibility: hidden. This allows the dimensions to be filled out while only showing the text area. Toggle the visibility property off and the display: none of the textarea to see it in action.
Also note that if you would like this to update in realtime, some simple javascript that updates the content of the hidden text based on the textarea should make it dynamic.
I have to display a sentence "some of the transaction processed successfully" but the td size is less to accommodate this. So its height is changing. I don't want to use nowrap also since it changes the width. I need to Display some thing like this "Some of the transaction...." how to achieve this.? any CSS or script 'll help me.. thanks in advance.
Current Status: Some of the transaction processed successfully
Expected: Some of the transaction....
You can use CSS text-overflow: ellipsis;:
.myDiv {
border: 1px solid black;
text-align: center;
text-overflow: ellipsis; /* Adds dots in the end on overflow */
white-space: nowrap; /* Disallows line break */
overflow: hidden; /* Hides overflowing text */
}
<div class="myDiv" style="width: 100px;">
Very long text very long text very long text
</div>
<div class="myDiv" style="width: 200px;">
Very long text very long text very long text
</div>
<div class="myDiv" style="width: 500px;">
Very long text very long text very long text
</div>
Use text-overflow: ellipsis with overflow: hidden and white-space: nowrap and fixed width in pixels.
Restrict by width.
div {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
<div>Some of the transaction processed successfully</div>
Using Javascript substring.
Restrict by number of characters.
var div = document.getElementById('message'),
message = div.innerHTML.trim();
div.innerHTML = message.length > 20 ? message.substr(0, 20) + '...' : message;
<div id="message">Some of the transaction processed successfully</div>
For table elements, you need to add div inside td. Check Demo.
I have a container element which I need to resize as its contents change. It contains 2 absolutely positioned divs which can both change height. If I don't specify the height of the container then anything after the container disappears under the contents.
At the moment I am doing the following but I'd be pleased to find a less laborious alternative:
(container has position:relative, #main and #sidebar are position:absolute, the contents of #sidebar have no positioning specified)
css:
div#mapcontainer { position:relative; width:100%; height: 600px; }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}
html:
<div id="container">
<div id="main">variable height content here</div>
<div id="sidebar">
<div id="foo">...</div>
<div id="bar">....</div>
...
</div>
<div>
js:
fixHeights = function() {
var children_height = 0;
$('#sidebar'). children().each(function(){children_height += $(this).height();});
$('#container').height(Math.max(children_height, $('#main').height()));
};
This is a very odd question, as div's height is always the height of its children.
Are you floating content in your container div? When you float child content the containing div doesn't act the same anymore.
If you're floating content that extends past the bottom of the container div, add the following div to the very bottom of the children of the container div:
<div style="clear:both;"></div>
That will not allow children to float over it, thus forcing the containing div to be the height of its tallest child...
<div id="container">
<div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
<div id="static" style="margin-left:104px;">Lots of static stuff here</div>
<div style="clear:both;"></div>
</div>
Okay, I'm not sure why you're doing the positioning the way you are, but I've done something similar for a website that had to look like a desktop application. I don't believe there is any way to do this other than with javascript. Html documents are designed to flow, not be rigid. If you want to bail on the javascript, you'll have to let go of the positioning styles and use your floating and clearing divs. Its not that horrible...
if you're floating the container div "overflow: auto" can also work magically, esp with regard to the whole IE hasLayout debacle
You didn't specify but I think you are having a problem with floating elements and you want the container they are in to be at least the size of the biggest floating element. You should try the following CSS hack that forces the browser to rerender the size of the container element to the size of the floating elements:
#wrapper:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
Let me know what you come up with and if this works. There are many other hacks to try, depending on your browser.
I would try changing the css not to use absolute positioning. In Firefox you would need to use the wrapper trick mention in the comments to get the mapcontainer the right height.
div#mapcontainer { clear:both; width:100%; min-height: 600px; }
div#main { float:left; margin-left: 10px; width: 500px; height: 400px; }
div#sidebar { float:left; margin-top:10px; margin-right:10px; width: 155px; height: 405px;}
Overflow:visible; That's the ticket. overflow:auto will create a scroll bar, if needed.