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>
Related
I have one paragraph p where I need to display some data.
I set white-space:nowrap and text-align:right. When someone types some content in one text field, this content shows in the paragraph from right to left.
But when data comes to left scroll-x was set to left, and to see new typed content you need to scroll to right.
I need the reverse, showing new content and scroll if you want to see the old one.
If i use direction: rtl, it works fine, but only for word, not with number, so i need another solution. Ofc i have an idea to do this with javascript, but i want solution without it.
document.querySelector('#inpt').addEventListener('keydown', function(e) {
document.querySelector('#display').innerHTML = e.target.value
})
p {
width: 100%;
white-space: nowrap;
text-align: right;
overflow-x: scroll;
}
<input id="inpt" type="text">
<p id='display'>
</p>
Setting display: flex with a flex-direction of row-reverse on your p tag seems to do the trick:
document.querySelector('#inpt').addEventListener('keydown', function(e) {
document.querySelector('#display').innerHTML = e.target.value
})
p {
display: flex;
flex-direction: row-reverse;
width: 100%;
white-space: nowrap;
text-align: right;
overflow-x: scroll;
}
<input id="inpt" type="text">
<p id='display'>
</p>
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 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
I need to find out if the contents of a span is overflowing its parent div. It works fine in Chrome and FF, but not in IE9. I have the following HTML structure:
<div class="wrapper">
<span>Dynamic text content, which may or may not overflow the parent</span>
</div>
With the following CSS:
.wrapper {
display: inline-block;
width: 80px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
In "real" browsers (i.e. not IE), it is easy to check if the span is wider than the div:
var innerSpan = $('.wrapper span');
var wrapperDiv = innerSpan.parent();
if (innerSpan.width() > wrapperDiv.width()) {
// Overflow has happened
}
But in IE9, the call to innerSpan.width() only returns the visible size, which is of course always smaller that the wrapper's size. How can I detect if the text has overflown in IE9?
NOTE: It only needs to work for IE9, not IE8, IE7 or any other version.
EDIT
I found a solution, which detects overflow but requires the span to have display: block;. See my answer below.
The height of your span is 18px as the height of text.When the text overflows the .wrapper div automatically the heigth of span increases.
var height=$('.wrapper span').css("height").replace('px','');
console.log(height);
if(parseFloat(height) > 18){
console.log("overflow occured");
}
DEMO
The element must be present in the DOM in order for the width to be calculated. If you need to calculate this before the user can see the element, try hiding it before putting it into the DOM.
Code Modified:
var innerSpan = $('.wrapper span');
var wrapperDiv = innerSpan.parent();
innerSpan.hide();
alert(innerSpan.width());
alert(wrapperDiv.width());
if (innerSpan.width() > wrapperDiv.width()) {
// Overflow has happened
}
innerSpan.show();
Demo : http://jsfiddle.net/dWzeQ/2/
Hope this will help you!
It worked when I forced the span itself to be block-level, and set the overflow and text-overflow attributes on it. Then I could use scrollWidth and offsetWidth. Here's the code:
HTML:
<div class="wrapper">
<span class="inner">Dynamic text content, which may or may not overflow the parent</span>
</div>
CSS:
.wrapper {
display: inline-block;
width: 80px;
height: 20px;
}
.inner {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
And finally, the Javascript:
var innerSpan = $('.inner');
if (innerSpan[0].scrollWidth > innerSpan[0].offsetWidth) {
console.log("Overflow!");
}
Need to implement functionality similar to what dotdotdot jQuery plugin does
but cannot use javascript frameworks (like jquery or ext).
Is there any easy way to add the dots to the content of div or span element if content takes more space then element should???
(similar to what css overflow: ellipsis setting does)
Can't use ellipsis beacause it doesn't work with many lines when height is limited.
Thank you :)
Why not using the CSS property text-overflow? It works great as long as you define a width in your tag.
Class in CSS:
.clipped {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<div class="clipped" style="width: 100px;" title="This is a long text">This is a long text<div>
You can also add the text to the title attribute, so the user can see the whole text when hovering over the element.
Works for any number of lines and any width without any javascript - and is responsive. Simply set your max-height to a multiple of your line height: i.e. (22px line height) * (max 3 lines of text) = (max height 66px).
https://codepen.io/freer4/pen/prKLPy
html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;}
.ellipsis{
overflow:hidden;
margin-bottom:1em;
position:relative;
}
.ellipsis:before {
content: "\02026";
position: absolute;
bottom: 0;
right:0;
width: 1.8em;
height:22px;
margin-left: -1.8em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 40%, white);
z-index:2;
}
.ellipsis::after{
content:"";
position:relative;
display:block;
float:right;
background:#FFF;
width:3em;
height:22px;
margin-top:-22px;
z-index:3;
}
/*For testing*/
.ellipsis{
max-width:500px;
text-align:justify;
}
.ellipsis-3{
max-height:66px;
}
.ellipsis-5{
max-height:110px;
}
<div class="ellipsis ellipsis-3">
<p>Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.</p>
</div>
<div class="ellipsis ellipsis-5">
<p>The number of lines shown is easily controlled by setting the max-height of the .ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.</p>
</div>
You could try:
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
This will only work if your elements are not dynamically sized. They will have to have a width set or some other mechanism to keep them from growing to allow more content.
My solution to my problem can seem a little awkward, but it works for me:)
I used a little of CSS:
word-wrap: break-word;
and Javascript:
var spans = document.getElementsByTagName("span");
for (var i in spans) {
var span = spans[i];
if (/*some condition to filter spans*/) { // just
if (navigator.appName == 'Microsoft Internet Explorer') {
span.parentNode.style.display ='inline-block';
}
if (span.parentNode.clientHeight > 50 ) {
span.innerHTML = span.innerHTML.substr(0, 26) + ' ...';
}
}
}
FOR ALL Browser:
.dotdot{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width:80px}
.dotdot:before { content: '';}
<div class="dotdot">[Button Text Goes here][1]</div>