We Keep Coding

Hide text completely if it overflows with css

I would like to hide text completely if it overflows.
overflow: hidden won't work for me here, because it will cut off the text.
I would like to use something that "detects" if the text is cut off, and if so it should be removed or not displayed. In this case only one word (or if you want so the word that would get cut).
A pure CSS solution if this is possible would be great. If there is no other way, JS would also be kind of ok.
For my example see the following images. The arrow is inserted by a pseudo class ::before
How it looks when it's fully displayed
How it looks like now when it overflows
What I want it to look like when it overflows
.somediv {
width: 100%;
}
.somediv_2 {
width: 20px;
}
.someanchor {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
background-clip: padding-box;
border-radius: 0;
background: transparent;
font-weight: 500;
color: #000;
box-shadow: inset 0 0 0 1px #000;
line-height: 1.75rem;
padding: .125rem .625rem .125rem .625rem;
display: inline-block;
}
.someanchor::before {
font-family: "Font Awesome 5 Free";
content: "\f0d7";
width: 100%;
height: 100%;
}
<div class="somediv">
<a class="someanchor">
Info
</a>
</div>
<div class="somediv_2">
<a class="someanchor">
Info
</a>
</div>
I made the second button smaller to simulate it. In my case it gets smaller by resizing the viewport, because it's pushed by other elements in a table.

Hide the "resizing" handle in a resizable div?

There are a few other questions which are similar, but none works or seems in the right area. I'm trying to make a table's columns' widths resizable. My table is a normal HTML table, except that it has the Bootstrap 4 class table (maybe they could have thought of a different name...!).
My css looks like this:
.resizable-div {
resize: horizontal;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
The relevant bit of JS where I add the cell to the table row with a resizable div inside it, and text inside that, is like this:
row.appendChild(cell);
const resizableTdDiv = document.createElement( 'div' );
resizableTdDiv.classList.add( 'resizable-div');
cell.appendChild( resizableTdDiv );
const cellTextNode = document.createTextNode(isHeader ? fieldName : value);
resizableTdDiv.appendChild(cellTextNode);
The result works fine: resizable columns. Hurrah. There is only one fly in the ointment:
I can get rid of the borders, of course. I just want to lose those pesky handler triangles in the bottom right corners... all of them!
I realise users have to be given an idea that they are able to resize the columns... but I'd be perfectly happy to do that some other way if I could replace those triangle icons with 100% transparent ones (for example).
Edit
Here's a JSFiddle! Amazingly easy to do!

You can do this in WebKit based browsers currently with the ::-webkit-resizer pseudo element.
div{
overflow:auto;
resize:both;
width:50%;
}
div:nth-of-type(2)::-webkit-resizer{
background:transparent;
}
<div>
Not Hidden
</div>
<div>
Hidden
</div>

WebKit provides a pseudo-element for this ::-webkit-resizer and you can hide those triangles by applying display: none, -webkit-appearance: none, or background: transparent.
For Firefox or anything without WebKit an alternative / workaround would be to position a custom handle over top of each resizable div. This may require some different markup though.
.wrapper {
position: relative;
display: inline-block;
}
.resizable-div {
position: relative;
resize: both;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
.handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: black;
pointer-events: none;
}
/* ::-webkit-resizer {
background: transparent;
} */
<div class="wrapper">
<div class="resizable-div"></div>
<div class="handle"></div>
</div>

Hover state does not work when applying z-index

The problem is I have 2 divs: one container a link and another a box shaped container. The link has a position:fixed; and it flies over the container div, so I tried to give the link a z-index with a negative value, turns out the
hover state does not work when applying z-index with a negative value for the anchor Unless I scroll the same amount of the height of the container div. So I scroll like 3 times and the hover state works again.
HTML
<div id="div-1">
<div class="container"></div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
</div>
CSS
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:0;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
an important thing is:
The container is hidden by Jquery, unless I click a certain button.
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
I have resorted to every possible (other ideas) I could think of. I tried to do the opposite meaning giving the container a z-index positive vales and leave the anchor, but that leaves the same problem
update
I will try to change the css property "z-index"but only when the the container button is toggled on
so the link will have z-index:-9; but only when the container is toggled to be viewed and when it is toggled back off the z-index will be removed or not applied.
I can't really figure how this will be written with jquery I tried this
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
$("#div-2 a").css("z-index", -9);
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
this only result when I toggled the container on the z-index will be applied, but when i toggle it of it remains, how to remove the z-index or make it equal to z-inedx:99; when the container is toggled off?
Only any other answer for the problem is appreciated.

It's not clear what you want exactly, but the pics helped, although it appears that you want the link above the container, it looks as if you don't?
the whole purpose is to make the anchor in a lower index, so when the container is toggled on/ viewed, the link won't be setting on top of the container.
But you want the link to always react when hovered upon. So I assume that you can't figure out why it's not hovering when the container is open and you can still see the link, so logically you'd expect to at least be able to hover over the visible portion of the link.
It's not jQuery and it's not the .container. It's the .container's container A.K.A. #div-1. #div-1 width is always 100% and even if you didn't have that style, it would be 100% still because that's what blocks have if there isn't an explicit width assigned to it.
Solution: Give #div-1 a smaller width.
You have a fixed link yet no coords. You can't expect a fixed element to stand it's ground and behave like a fixed element if it doesn't know where to stand. Also if you have any positioned elements and you want interaction between other elements, make those elements positioned as well, div-1 is now position:relative and the z-index properties of the link and div-1 function correctly now.
Solution: Give #div-2 a top and left or right and bottom properties. Give #div-1 a position property so that the z-index functions properly.
All details are commented in the source.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
#div-1 {
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
position: relative;
z-index: 1;
border: 1px solid red;
width: 200px;
/*Enable this and it will block link*/
/*width:100%;*/
height: 290px;
}
.container {
/* This saves you an unnecessary step in jQuery */
display: none;
width: 200px;
height: 290px;
background: orange;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
position: fixed;
font-weight: 500;
font-size: 1.09em;
text-align: center;
background-color: none;
text-decoration: none;
outline: none;
/* It's not clear whether you want the link above or
| below the container. If above, simply change to
| z-index: 2
*/
z-index: 0;
/* If you have a fixed element give it coords, otherwise
| it doesn't know where it should stand and behavior
| will be unexpected.
*/
top: 10%;
left: 125px;
}
#div-2 a:hover {
background: red;
color: white;
}
/* FLAG is just to test the accessibility of the link */
#FLAG {
display: none;
}
#FLAG:target {
display: block;
font-size: 48px;
color: red;
}
</style>
</head>
<body>
<button id='button-f'>F</button>
<div id="div-1">
<div class="container">Container is open</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
<span id='FLAG'>This link is accessible now!</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
/* This is the jQuery you need to accomplish what you want.
| The rest was redundant and unnecessary.
*/
$(document).ready(function() {
$("#button-f").click(function(e) {
$(".container").toggle();
});
});
</script>
</body>
</html>

Have you tried assigning a z-index to #div-2?
You'll need to assign it a position to be able to give it a z-index. Try this:
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:2;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
position: relative;
z-index:1;
}

I don't know what actually in your code but the js you provide look at the if section you have (##button-f) so we find an error here and do we actually need this line ??like we also don't need the line 'container'.hide() in JS. Now you have to scroll for the 'a' certain height because yous set height for #div-1 which is not hidden. So that's amount of height you have to scroll.
So What I change on your code
1. cut the height of div-1 and place it to .container class. you dont provide the a:hover class so I add that to and remove some unnecessary css you have. If you have any other Question ask me in comment LIVE ON FIDDLE
$(document).ready(function() {
$("#button-f").click(function() {
$(".container").toggle();
});
});
button {
width: 13%;
height: auto;
}
#div-1{
width:100%;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
.container {
height:290px;
display:none;
border: 1px solid red;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
positon:fixed;
float:right;
font-weight: 500;
font-size: 1.09em;
text-align: center;
text-decoration: none;
border-radius: 10px;
}
#div-2 a:hover {
background: black;
color: white;
}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<button id="button-f">
button
</button>
<div id="div-1">
<div class="container">tagasdgasdgasdgas</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
<a href='#'>This is a link</a>
</div>
</body>

How to make a html div vertically scrollable after it's height reaches 100% height of the page?

I have a a div on my page, and I also have a button, that when pressed, adds a new <p> element in that <div>. If I keep pressing the button the height of the div will exceed the height of the actual page, and I'd have to scroll the page in order to see the last paragraph, and then scroll back up in order to press the button again. I want the div to become vertically scrollable after it reaches the height of the page. This is the CSS that I used for the div:
div#messages{
width: 50%;
margin-left: auto;
margin-right: auto;
padding:20px;
border: 1px solid black;
border-radius: 3px;
overflow-y: auto;
}
But the overflow-y:auto; property doesn't seem to work?
What am I doing wrong and how can I achieve the desired effect?
Thanks.
JSFIDDLE : https://jsfiddle.net/pm5wkgv4/

You need
html,body{
height:100%;
margin:0;
padding:0;
}
* { /*Or at least html, body and #messages*/
box-sizing: border-box;
}
#messages{
width: 50%;
max-height: 100%;
padding:20px;
border: 1px solid black;
border-radius: 3px;
overflow-y: auto;
position:absolute;
top:0;
left:25%;
background:#fff;
}
jsfiddle: https://jsfiddle.net/vimxts/pm5wkgv4/2/
Also, you should only have one id in a page, you may delete the div part before #message

Would this be a solution to your problem: Plunkr
you can use
height:60vh;
to specify the heigt.

Using Daniel Cheung answer, if you want the page to be unscrollable, you might want to add : overflow: hidden.
https://jsfiddle.net/pm5wkgv4/1/
#message {
max-height:100%;
box-sizing: border-box;
}
html, body {
height:100%;
box-sizing: border-box;
overflow: hidden;
}

<th> cells not keeping width

Note: These issues only occur in Firefox or Chrome. IE does not appear to have the same problem.
HTML
<div id="renewals-div">
<label for="renewals">Renewals:</label>
<input type="hidden" name="renewal_count" id="renewal_count" value="0">
<table id="renewals">
<thead>
<tr data-num="-1" class="header">
<th class="date_column">Date</th>
<th class="details_column">Details</th>
</tr>
</thead>
<tbody>
<!-- rows populated by ajax call on load -->
</tbody>
</table>
<br>
<label for="add_renewal-div"></label> <!-- spacer -->
<span id="renewal_buttons-span">
<button type="button" id="add_renewal">Add</button>
<button type="button" id="remove_renewal">Remove</button>
</span>
</div>
CSS
form {
width: 100%;
padding-left: 2em;
}
form fieldset {
border: none;
margin: 0 0;
padding: 0 0;
}
form div {
box-sizing: border-box;
width: 100%;
margin-bottom: .2em;
}
form label {
display: inline-block;
padding-bottom: 10px;
width: 30%;
max-width: 15em;
vertical-align: top;
}
form input[type=submit] {
/*float: left;*/
width: 75px;
height: 35px;
}
.radio_group {
width: 70%;
}
form input[type=text] {
width: 50%;
max-width: 400px;
display: inline-block;
}
/* Renewals table and other stuff */
table {
table-layout:fixed;
width: 51%;
max-width: 404px;
border-collapse: collapse;
display: inline-block;
}
table td, table th {
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
table input {
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
width: 95% !important;
margin: 3px 3px;
}
table tr:hover:not(.selected):not(.header) {
background-color: #D6ADFF;
}
table .selected {
background-color: #522D80;
color: white;
}
.header {
width: 100%;
}
.date_column {
width: 25%;
}
.details_column {
width: 75%;
}
#renewal_buttons-span button {
width: 5em;
height: 2.5em;
}
/*********************************/
div.ui-datepicker {
font-size:10px;
}
/*#media (max-width: 650px) {*/
JS
$('#remove_renewal').click(function() {
var next = $('.selected').next('tr');
$('.selected').remove();
if (next.length === 0) {
$('#renewals tbody tr').last().click();
} else {
next.click();
}
});
My issue is with the "Renewals:" table. I am allowing the user to add and delete rows to the table. By default two test rows are loaded on page load. If you remove both of them, suddenly the table columns no longer respect their width properties. Since the <th> columns are the only ones left, I assume they are the ones not honoring my width setting. How can I get them to honor width even when no rows exist?
EDIT: The side issue below is resolved. I misunderstood CSS selectors as overwriting each other based on the last one in the CSS file. Apparently the styles are decided by the selector that is the most specific. By changing my second selector to input[type=text] it was specific enough to override the previous one without the use of !important.
Side issue:
I have a second problem with the width of the input boxes in the table. I have two CSS selectors affecting input width:
form input[type=text] {
width: 50%;
max-width: 400px;
display: inline-block;
}
table input {
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
width: 95% !important;
margin: 3px 3px;
}
As you can see, the selector setting the width to 95% comes after the previous one so it should take precedence. However, if I take out the !important the 50% width overrides the 95%! In CSS, I thought that for conflicting styles, the last one declared/selected wins? So why do I still need !important since the style I want to be applied is last?

I set a width on the #date_col and was able to prevent the collapse
I notice that .header doesn't have any styles associated with it, so you could try putting a width value in it and then letting the two cells fill its parent container. One is at 25% and the other at 75%, but they don't have a parent to reference.
The !important declaration is a symptom of a specificity war with ID selectors and can turn into a mess. I'd encourage you to use classes instead of ID's to prevent this problem.
I think this article explains it well. Towards the bottom

If you want to know why you need important, remove it.
Then, in Chrome, go to development tools.
Inspect the element that has the problem. In the right hand panel, in "Styles", you will see that property crossed.
Now, go to Computed Style, the panel above.
Go to the property; in this case width. deploy it pressing the arrow, and you will see what is the guilty rule

My answer was deleted by a moderator, and converted to a 'comment'
i first noticed your table is displayed has an inline-block.
Try display:table. All the mechanics of TABLE layout will obey.
table {
border-collapse: collapse;
display: table; /* you can even remove this part*/
max-width: 404px;
table-layout: fixed;
width: 51%;
}
To make it keep layout with it's label, just float the previous label left.
Carry on