Hide extra text instead of scrolling or overflowing parent div - javascript

I have a very limited space where I can display text, and I would like to hide anything extra instead of doing a line break, scrolling or overflowing parent div.
In this case my text is inside an anchor tag, so I made a small component to exemplify what I want to do here:
function App () {
return (
<div style={{ width: 100, border: 'solid 1px black'}}>
<a style={{ overflow: 'hidden'}} href='#'>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
</div>
)
}
ReactDOM.render(
<App/>,
mountNode
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container" style="padding: 24px"></div>
<script>
var mountNode = document.getElementById('container');
</script>
Anyway, how do I hide all that extra text in order to keep the text content of the anchor tag just one line?

Move overflow hidden to the div and add whiteSpace no wrap to the link
function App () {
return (
<div style={{overflow: 'hidden', width: 100, border: 'solid 1px black'}}>
<a style={{ whiteSpace:'nowrap'}} href='#'>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
</div>
)
}
ReactDOM.render(
<App/>,
mountNode
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container" style="padding: 24px"></div>
<script>
var mountNode = document.getElementById('container');
</script>

You're missing white-space: nowrap and display: block.
1) white-space: nowrap prevents line wrapping.
2) display: block ensures the anchor inherits its parent's width, as opposed to its text's width.
div {
width: 100px;
border: 1px solid black;
}
a {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* optional */
display: block;
}
<div>
<a>Please hide any text that would cross the parent divs border instead of line breaking to make it longer.</a>
</div>

You can use the css overflow property "hidden".
<div style="overflow:hidden; width:100px; height: 100px; border: 1px solid black">hide any text that would cross the parent divs border instead of line breaking to make it longer</div>

Related

make an element the same height as its child with css

I have this code and the child's height is changing but the parent's height remains the same. I want a CSS code to make the parent's height the same as the child
<div class = "parent">
<div class="child">
</div>
</div
Note: using your HTML
if you add the CSS
<style>
.parent, .child {
width: 120px; height: 100px;
}
</style>
<div class = "parent">
<div class="child">
</div>
</div
both child and parent would have the same width and height of: 120, by 100. Change these values to suite what you need.
if you add this additional CSS lines:
.parent { border: 1px solid red; }
.child { border: 1px solid blue }
this will draw your border - in different colours, so you can see easily what is happening - you can remove this after

Textarea with height: auto and line breaks

If I have a textarea with some text on it, and the text has some line breaks on it, if I set my style to:
textarea {
height: auto;
overflow: hidden;
resize: none;
}
When I load the page, then the text area will only automatically set the height of the textarea until it finds the first line break, example:
For a textarea with this text:
This is an
example text
When the page is loaded, the textarea will be shown as:
This is an
Browser thinks line breaks are the end of the whole text. How do I fix it?
The text is still there if you use the arrow keys to move down, it's just that the textarea by default isn't tall enough to show all the text. You can use the rows attribute to define now many rows of text the textarea should have by default.
Alternatively, if you want more control you can use a div with the attribute contenteditable="true".
textarea {
height: auto;
overflow: hidden;
resize: none;
}
/*
* CSS for div with contenteditable="true"
*/
.textarea {
display: inline-block;
white-space: pre-wrap;
overflow-wrap: break-word;
border: 1px solid;
padding: 2px;
}
<textarea rows="3">This is an
example text
</textarea>
<div class="textarea" contenteditable="true">This is an
example text
</div>
To any one reading this, the solution I came up with is simple. With JQuery, on document ready:
$( document ).ready(function() {
var trueHeight = $( '#your_textarea' ).prop( 'scrollHeight' );
$( '#your_textarea' ).height( trueHeight );
});
Works like a charm.
.textarea {
height: auto;
overflow: hidden;
resize: none;
background-color: #000000;
color: #ffffff;
padding-left: 20px;
}
<div class="textarea"><p>This is an</p><p>example text</p></div>
Please check the above code.
You can use the rows attribute to set the height of your textarea.
<textarea rows='100'>this is an
example text</textarea>
Fiddle: https://jsfiddle.net/jvw7s1rz/2/

How to detect if text flows outside bounding box

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

How to keep a scrollbar always bottom?

I have a scroll-bar in a div element and initially it's position is top. Whenever i add some text to the div element then the scroll-bar does not move. Is there any way, the scroll-bar of the div element's position will be always bottom and whenever I add some text to the div element, the scroll-bar also goes to the bottom automatically?
Here's my div element:
<div class='panel-Body scroll' id='messageBody'></div>
And CSS class
.scroll {
height: 450px;
overflow: scroll;
}
What i need is, initially the position of the scroll-bar should be bottom.
Also when i clicked a send message, I'm adding the message to the div elements 'messageBody'. On that time the the scroll-bar should be down again.
This is the current style of my scroll-bar
And I want it to be always
Thanks in advance.
var messageBody = document.querySelector('#messageBody');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;
Something like this should do what you want if I understood what you want correctly.
Replace messageBody in getElementById() with your chat message container id.
var chatHistory = document.getElementById("messageBody");
chatHistory.scrollTop = chatHistory.scrollHeight;
This will scroll the message container to the bottom.
Since scroll position is recorded in pixel and not percentage, the scroll position doesn't change as you add more elements into the container by default.
Do this after you have appended a new message into your chat message container.
Assume your html code like this.
HTML
<div id="parentDiv">
<div class="people">1</div>
<div class="people">2</div>
<div class="people">3</div>
<div class="people">4</div>
<div class="people">5</div>
<div class="people">6</div>
<div class="people">7</div>
<div class="people">8</div>
<div class="people">9</div>
</div>
And then wrap your js like this
JS
var objDiv = document.getElementById("parentDiv");
objDiv.scrollTop = objDiv.scrollHeight;
DEMO
Here you go. Follow this concept.
$('#messages').scrollTop($('#messages')[0].scrollHeight);
#chatbox-history {
overflow: none;
position: relative;
width: 100%;
height: 200px;
border: 1px solid #ccc;
}
#messages {
overflow: auto;
position: absolute;
bottom: 0;
width: 100%;
max-height: 200px;
}
#messages div {
border: 1px solid #e2e4e3;
margin: 5px;
padding: 10px;
background: #fafafa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatbox-history">
<div id="messages">
<div>asdjf ;asd</div>
<div>ajsd fa ;skd f;s</div>
<div>asdjf ;akjs d;lf a;lksd fj</div>
<div>ajsd fkaj s;dlf a;ljsdl;fkja;lsd f; asd</div>
<div>Wassup?</div>
</div>
</div>
That'd be :: messageBody.lastChild.scrollIntoView(); //for the initial scroll to bottom position.
p.s.: After the page load, this command should be called by your message handler on message update.
It's already 2023 and you can simply use Element.scrollIntoView() now! Check MDN documentation.
var messageBody = document.querySelector('#messageBody');
messageBody.scrollIntoView();

How do I make a <hr /> tag go vertically

How do I make a <hr /> tag go vertically, instead of its standard appearance as a horizontal line/going sideways?
I'd like to be able to use this on a mobile site, so a more widely-supported solution is preferable to one that only works in the latest browsers.
This will require changes to more than just the hr. the element above and below it must be floated. the effect can be achieved with a solid border:
<div class="section1"> content </div>
<div class="section2"> more content </div>
CSS:
.section1 {
float: left;
width: 200px;
border-right: 1px solid #333;
}
.section2 {
float: left;
width: 200px;
}
Edit: see also this answer
You could use css transforms. However, this just turns it, things are still where they would be if you hadn't rotated it.
HTML
<hr/>
<hr class="vert" />
<hr id="vert1" />
CSS
/*All <hr>*/
hr {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
/* IE 9 */
-webkit-transform:rotate(90deg);
/* Safari and Chrome */
}
/*<hr> of class ".vert"*/
hr.vert {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
/*<hr> with id "vert1"*/
hr#vert1 {
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
Well you could possibly make a div (<div></div>) and then give it values with css later regarding height/width. If you want it to apply to one specific object give it an id <div id=""> and more than one object give it a class <div class="">
An example of the css you'd do is:
#(id name) or div.(class name) {
height: ; (how tall)
width: ; (how wide you want it)
background-color: ; (sets the color of the bar)
position: ; (depends on if you want it absolute or static etc.) }
You can obviously add/remove other css as you go depending on what you want to do
Put it in a div:
<div style="border-right:1px solid #333;">
Content here
</div>
This is with inline css. Otherwise, separate the css:
div {
border-right:1px solid #333;
}
I suppose you could re-style <hr /> as an inline-block element, with specified height...
hr {
display: inline-block;
width: 2px;
height: 256px;
}
That's just a basic example to get the <hr /> to look like I think you want it to look. You'd have to play with height and width (and possibly positioning) to make it do exactly what you need...

Categories

Resources