I have a div on the left and a canvas on the right, both filling the whole screen. Depending on the item I point to in the canvas, I show some information on the div (element.innerHTML = '...'). The problem is, some texts are too long and get hidden to the right side of the div (I don't want to use a scrollbar).
Usually the long text is composed of slash-separated names, like name1/name2/name3. If the slash separated the text to a new line, my problem would be solved, but it doesn't. Some possible solutions would be:
1) substitute '/' with '/ ', but it gets ugly if the text fits in a single line. For the same reason, I can't add \n to the html. Also, this text is meant to be copied, so even adding some styling to hide the space is not what I need.
2) substitute '/' with another separator character that automatically breaks the line (are hyphens my only friend here? They don't look appropriate for my case).
3) use overflow-wrap: break-word, but it will break the word in the middle, and I prefer it to be broken right after the slash.
4) automatically increase the div width without messing with the canvas position and size (body is using flex-direction:row). That would be the best solution, I think, because it would also solve the rarest cases where the problem is not with the slash.
I made a jsfiddle to illustrate, you can see that some slashes break the text, while others don't (and the text breaks before the slash, which I think is ugly. Anyway, if I have to accept the text being broken before the slash, it still needs to break before ALL the necessary slashes!)
HTML
<body>
<div id='data'>
<button onclick='c()'>
Get Text
</button><br>
<br>
Default text.<br>
<br>
<span id='text'></span>
</div>
<canvas id='canv'>
</canvas>
</body>
CSS
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
overflow: hidden;
}
#data {
padding:10px;
background-color: #CCF;
overflow-y:auto;
overflow-x:hidden;
}
#canv {
background-color: #CFC;
}
JavaScript
var data = document.getElementById('data');
var canv = document.getElementById('canv');
canv.width = window.innerWidth - data.offsetWidth;
canv.height = window.innerHeight;
function c() {
var text = document.getElementById('text');
text.innerHTML = 'longname1/longname2/longname3/longname4';
}
You can wrap the slashes using span and apply some styling to make them close to text:
var data = document.getElementById('data');
var canv = document.getElementById('canv');
canv.width = window.innerWidth - data.offsetWidth;
canv.height = window.innerHeight;
function c() {
var text = document.getElementById('text');
text.innerHTML = 'longname1<span>/</span> longnam<span>/</span> longname3<span>/</span> longname4<span>/</span> lllllllll<span>/</span> lon<span>/</span> aa';
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
overflow: hidden;
}
#data {
padding: 10px;
background-color: #CCF;
overflow-y: auto;
overflow-x: hidden;
}
#canv {
background-color: #CFC;
}
#text span {
letter-spacing: -4px;
}
<body>
<div id='data'>
<button onclick='c()'>
Get Text
</button>
default text
<br>
<br>
<div id='text'></div>
</div>
<canvas id='canv'>
</canvas>
</body>
Related
I'm trying to center a pargraph below a div (could be a square image for the matter). I understand that the easiest way to do it is to contain both the div and the text below it in a single container and use text-align, but in this instance I have a limitation where I cannot let the small image be contained in a container wider than that image.
Without centering the text it looks like this:
My code:
HTML:
<div class="block"></div>
<p class="label">This text is a bit long</p>
CSS:
body {
padding: 5rem;
}
.block {
background-color: blue;
width: 80px;
height: 80px
}
.label {
}
Codepen:
https://codepen.io/omerh3/pen/oNqVjvV
The reason why I cannot let the image be in a container is that I'm using ReactFlow where the handles should connect to the sides of the image without a gap. If I put the image and the text inside a div, the div will take the width of the text and thus it will naturally be wider than the image.
I tried centering the text below the image with absolute positioning, but with different paragraphs sizes, it won't be persistent in the center. Is there a away to achieve this without inserting the image/square and the text inside one div?
One last thing: the width of the image if constant, for example 100px
one way to do this is to get the coordinates of your two elements and then add margin-left: to adjust the position of the span
let divOffsets = document.getElementById('a').getBoundingClientRect();
let divRight = divOffsets.right;
let divLeft = divOffsets.left;
console.log(divLeft,divRight)
let spanOffsets = document.getElementById('b').getBoundingClientRect();
let spanRight = spanOffsets.right;
let spanLeft = spanOffsets.left;
console.log(spanLeft,spanRight)
let divCenter = divLeft + divRight / 2
console.log(divCenter)
let offset = divCenter - (spanLeft + spanRight / 2)
offset = offset + "px"
document.getElementById('b').style.marginLeft = offset;
body {
padding: 5rem;
border:solid 1px red;
position:relative;
}
.block {
background-color: blue;
width: 80px;
height: 80px;
}
span{
position:absolute;
}
<div id = 'a'class="block"></div>
<span id = 'b' >1234</span>
Do you mean something like this??
body {
padding: 5rem;
}
.block {
background-color: blue;
width: 80px;
height: 80px;
margin:0 auto;
}
p.label {text-align: center}
<div class="block"></div>
<p class="label">This text is a bit long</p>
I have a set of tags, that I want to show in the client. However, sometimes you might have too many tags and you want to show only one row of tags maximized to your body's width without setting a fixed number of columns or item width, and adding a show more button at the end of the tag list with the same style as a tag.
I have achieved this using Javascript in my Angular project by doing the following:
Find out the width of your tags container dynamically, with ViewChild on my content container:
let contentWidth = this.contentContainer.nativeElement.clientWidth;
Calculate the text width of the see more button and use it to calculate the new content width minus see more button width:
Calculating text function does the following:
const canvas = document.createElement('canvas'); // create a canvas
const context = canvas.getContext('2d'); // get the context
context.font = '12px avertastd-bold'; // set up your font and size
And calculate the text width:
const seeMoreButtonWidth = context.measureText(seeMoreButtonText).width;
Create a new array variable 'previewTags' which will hold the tags that are visible when the tags body is in collapsed state, and fill in as many tags as you can by calculating each tag's width with it's content text you receive from the API by checking if the next tag + its padding (static value) fits into the width.
(Not runnable here)
for (const tag of this.data.tags) {
const width = context.measureText(tag).width;
if (contentWidth - (width + this.tagsPadding) > 0) {
previewTags.push({text: tag});
contentWidth -= (width + this.tagsPadding);
} else {
break;
}
}
Push the see more button at the end of previewTags list:
previewTags.push({text: seeMoreButtonText, isButton: true});
And it looks like this in the html:
<ng-container *ngFor="let tag of previewTags">
<div class="tag" [ngClass]="{'see-more-button': tag.isButton}">{{tag.text}}</div>
</ng-container>
Output:
Resize:
As you see, now the tags are flexiable (this code does not include the show more functionality).
After giving you this background and understanding of what I am doing, I would love to ask if this is possible to achieve with css or less JavaScript intervation?
Something like this could be a pure css solution if your tags have a constant height. I just let the flex-list wrap around and then don't show the overlap.
.content_wrapper {
display: flex;
justify-content: flex-start;
flex-direction: rows;
}
.tag_wrapper {
display: flex;
justify-content: flex-start;
flex-direction: rows;
flex-wrap: wrap;
width: 80%;
height: 32px;
overflow: hidden;
}
.tag_wrapper div {
width:100px;
height:30px;
border: 1px solid black;
}
button {
flex-grow: 4;
}
<div class="content_wrapper">
<div class=tag_wrapper>
<div>Tag1</div>
<div>Tag2</div>
<div>Tag3</div>
<div>Tag4</div>
<div>Tag5</div>
<div>Tag6</div>
<div>Tag7</div>
<div>Tag8</div>
<div>Tag9</div>
</div>
<button>See more</button>
You could probably make the "See more" button solution more elegant, to not have as much white space but I'll leave that to you :)
Here is some javascript to remove the see-more button if it's not needed.
(OBS) this only works if all the tags are the exact same width and have the same margin. I did this to avoid looping through all values and checking their width individually.
(I know the list is in the wrong order, I made it like that to get the see-more button fit in well without having to tinker a bunch.
function getWidthWithMargin(elem) {
var style = elem.currentStyle || window.getComputedStyle(elem)
margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight)
return(elem.getBoundingClientRect().width + margin)
}
function handleWindowSizeChange() {
let tags = document.getElementsByClassName("tag");
if(tags.length != 0)
{
let tag_width = getWidthWithMargin(tags[0]);
if(tags[0].parentElement.getBoundingClientRect().width/tag_width > tags.length) {
document.getElementById("see-more-button").style.display = "none";
}
else{
document.getElementById("see-more-button").style.display = "block";
}
}
}
window.onload = handleWindowSizeChange;
window.onresize = handleWindowSizeChange;
.content_wrapper {
}
.tag_wrapper {
display: flex;
justify-content: flex-start;
flex-direction: row-reverse;
flex-wrap: wrap;
width: 100%;
height: 32px;
overflow: hidden;
}
.tag_wrapper div {
min-width:100px;
height:30px;
border: 1px solid black;
margin: 10px;
}
.tag_wrapper button {
height:30px;
flex-grow: 50;
}
<div class="content_wrapper">
<div class=tag_wrapper>
<button id="see-more-button">See more</button>
<div class="tag">Tag1</div>
<div class="tag">Tag2</div>
<div class="tag">Tag3</div>
<div class="tag">Tag4</div>
<div class="tag">Tag5</div>
<div class="tag">Tag6</div>
<div class="tag">Tag7</div>
<div class="tag">Tag8</div>
</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 want to get the size of text inside a container. Let's consider general case when the container has padding and border.
The problem is that getBoundingClientRect returns the size of text PLUS left border and padding, in case the text overflows. Otherwise it returns just the size of border box of the container.
You can get the width if you create a placeholder div with all of the same text formatting options and find it's width.
For instance, I will create a div with the class .hidden that has the same attributes as the original div.
div.container
{
font-size: 16px;
}
div.hidden
{
font-size: 16px;
display: none;
}
Then, using jQuery, copy the contents of .container to .hidden and find the width of .hidden:
$(function(){
$("div.container").each(function(){
$("body").append("<div class='hidden'>"+$(this).html()+"</div>");
var width = $("div.hidden").width();
$("div.width").html("Actual width: "+width+"px");
$("div.hidden").remove();
});
});
JSFiddle
Interesting! You could use javascript to clone the text inside of an empty element offscreen that has 0 padding/margin/border. Then you could get the width of that element.
var txt = document.getElementById('fixed').innerHTML,
clone = document.getElementById('clone');
clone.innerHTML = txt;
var width = clone.offsetWidth;
document.getElementById('output').innerHTML = width;
#fixed {
width: 8em;
height: 8em;
border: .5em solid red;
}
#clone {
margin: 0;
padding: 0;
border: 0;
position: fixed;
left: -9999px;
}
<div id="fixed">asdfkjahsdflkahjsdflkjhasdljfhalsdkjfhalsdkjfhalsdkjfhalksdhjflasd</div>
<div id="clone"></div>
Width of text: <span id="output"></span>
People who had answered here came with a brilliant idea of wrapping the text into a <div> having zero margin, border and padding;
I just developed the idea further. I place the div inside the container, making the text have exactly the same style as it had without wrapper.
JsFiddle
This solution will work almost everywhere. It can be broken by not very encouraged way of writing CSS, like
.container div b {
padding: 5px; /* firing only when test is run */
}
If you do not code CSS in you project like that, you are the lucky one to use my snippet )
I'm trying to achieve the following in HTML/Javascript:
have a coloured circle with a piece of text perfectly centred (both horizontally and vertically) within it;
dynamically from JavaScript, be able to alter the size of the circle, maintaining the text centred within it at all times.
The following achieves the first of these:
Create the circle using a DIV element whose style has appropriate background and border-radius;
Inside the DIV, put a P element whose style has "text-aligbn: center" and "line-height: ".
For example:
p.circlecaption {
text-align: center;
line-height: 128px;
}
...
<div style="background: #a0a0a0; margin: 0px; width: 128px;
height: 128px; border-radius: 64px;" id="theCircleDiv">
<p class="circlecaption" id="theText">TEST!</p>
</div>
This works fine for the initial, static, case. The problem comes when, from JavaScript, I attempt to set the line-height property in order to keep the text vertically centred as I change the size of the div. I expected something like the following to work:
var obj = document.getElementById('theCircleDiv');
var sz = '' + (rad*2) + 'px';
obj.style.width = sz;
obj.style.height = sz;
obj.style.margin = '' + (64 - rad) + 'px';
obj = document.getElementById('theText');
obj.style['line-height'] = sz;
However, while this code re-sizes and re-centres the circle perfectly, it doesn't vertically re-centre the text-- i.e. the attempt to dynamically set line-height appears to be ignored.
Can anybody offer any help on either how to set line-height dynamically, or else a way to achieve my desired goal of keeping the text centred within the circle? From my reading around, I've seen various other suggestions such as calling the property "lineHeight" or playing around with "vertical-align: middle", but none seems to work.
(I am currently testing in Safari on Mac OS which is likely to be most used among the site's target audience, but am also looking for a solution that is reasonably cross-browser compatible.)
You can achieve that with pure css
#theCircleDiv {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#theText {
vertical-align: middle;
}
Working Example: http://jsfiddle.net/bZj52/
Here is an example. I'm using jQuery UI to wire up some dynamic setting of the size but the re-size code should work in a pure JavaScript environment.
First, I cleaned up the HTML and put it's style in CSS
HTML:
<div id="theCircleDiv">
<p class="circlecaption" id="theText">TEST!</p>
</div>
CSS:
#theText {
text-align: center;
line-height: 128px;
}
#theCircleDiv {
background: #a0a0a0;
margin: 0px;
width: 128px;
height: 128px;
border-radius: 64px;
}
JavaScript:
function resize(size) {
var circle = document.getElementById('theCircleDiv'),
text = document.getElementById('theText');
circle.style.width = size + 'px';
circle.style.height = size + 'px';
circle.style.borderRadius = (size / 2) + 'px';
text.style.lineHeight = size + 'px';
}
And this is much easier with flex box.
div {
background-color: #ccc;
height: 50px;
width: 100%;
/* Important Part */
display: flex;
justify-content: center;
align-items: center;
}
<div>
<span>Center Me Please</span>
</div>