JavaScript to Avoid Widows

Widow/Orphan Control with JavaScript?

I believe you're describing typographic widows in an HTML document? Where a single word wraps around onto a new line in a header, for example?

The jQuery Widon't plugin goes through your HTML looking for this and puts a non-breaking space between the second-last and last words to ensure that at least two words wrap to a new line.

Hope this helps, Karl

Prevent widows - items alone in a row - when using css grid

A solution is to use flexbox instead of grid. This way it can stretch with the screen size.
We use 25% for a 4 column layout. Subtracting 1rem for a bit of margin. (0.5 left + 0.5 right)

(Open snippet in fullscreen to see it working)

.my-grid {
  display: flex;
  flex-wrap: wrap;
}

.card {
  min-width: 264px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 1px #00000026;
  font-size: 14px;
  background-color: red;
  margin: .5rem;
  flex: 1 1 calc(25% - 1rem);
}

<div class="my-grid">
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">blub</div>
</div>

Preventing orphaned words but exclude a tag

Here's a solution taken from this post and adapted to rebuilding your html. Note that regex gets a little iffy-er the more complex and nested your html. However, works like a charm here! The post link explains the regex in detail.

$("p,h1,h2,h3,h4,h5,h6").each(function() {
  result = $(this).html().match(/<\s*(\w+\b)(?:(?!<\s*\/\s*\1\b)[\s\S])*<\s*\/\s*\1\s*>|\S+/g);
  let out = "";
  result.forEach(function(seg, index){
    let sep;
    if (index == result.length - 1) sep = "";
    else if (index == result.length - 2) sep = " ";
    else sep = " ";
    out += seg + sep;
  })
  $(this).html(out);
  console.log($(this).prop('outerHTML'))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Call us at <a href="tel:+18001234567">1-800-123-4567</a></p>

Can I word wrap to prevent weird one word on second line problems?

You can programmatically (i.e. with JavaScript) convert all final spaces in whatever html elements you want to non-breaking spaces.

Run the code snippet below and re-size the window to see the effects of line-wrapping: You will never see a single word on the last line of a paragraph (or long title, or whatever). In this code, you can choose which elements to target, e.g. just paragraphs, or divs and paragraphs, etc. by creating a string containing css notation for the tags of the elements you want modified. Note that the use of the <span> element in the code is simply for demonstration purposes. In real life, leave it out.

To give credit where credit is due, while I was working on this answer, SO contributor QBM5 also suggested the use of non-breaking spaces in this way.

var htmlTagsToModify = "h1, h2, div, p, li";
$(document).ready(function() {    $("button").click(function() {    $("span").toggleClass("show");  });    // $(htmlTagsToModify).css({ 'color': 'red' });   $(htmlTagsToModify).each(function(idx, elem) {    var content = $(elem).html();        var lastSpace = "<span> </span>"; // just use this line for demonstration purposes    // var lastSpace = " "; // use this line in actual implementations        var modifiedContent = content.replace(/\s+(\S+\s*$)/, lastSpace + "$1");    $(elem).html(modifiedContent);  });});

span.show {  background-color: orange;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button>Toggle highlighting of last spaces</button><p>Resize this window to observe line-wrapping.</p>
<h1>Lorem ipsum dolor sit amet, est ex soleat deseruisse, cu alia fabulas sit. Et usu aliquid sanctus laboramus.</h1>
<div>Est oporteat principes dissentias cu, ad nec essent invidunt. Illud labore fierent et sea. Sit rebum veritus prodesset ea, vix te duis everti nusquam. Vis ei ludus detracto, vix nihil dicunt facilisi eu. Ut alterum propriae per, tritani consetetur no usu. Eloquentiam disputationi id quo, illud etiam has an.</div>
<h2>Mea ad accusam offendit. Facer convenire his no, causae reprehendunt pri ne. Vim iriure labitur sensibus an.</h2>
<p>Albucius concludaturque vel at. Vocent animal graecis cum et, noluisse principes an quo. Primis minimum cu pro, sit ponderum lobortis mandamus te, ad vis movet equidem. Inermis oporteat aliquando at eam, duo veritus vivendo iudicabit in, ne vitae ubique delicata eam.</p>
<ul>  <li>Civibus ullamcorper conclusionemque usu at, ignota noster virtute cu his. Id quo ipsum feugait, erat euismod lucilius ut pri, pri at adhuc aliquid adipiscing. Ius te habeo suavitate neglegentur, in ius tota probo. Ut atqui aperiam accusam ius, ludus sadipscing no ius. Cum congue audire ad, at dicat novum meliore his, pri et delenit dissentiunt. Vix mandamus consulatu ut.</li>
  <li>Vide contentiones ad ius, id ipsum meliore nominati duo. Clita scaevola invidunt no has. Eam facete suscipit ut. Duo alterum antiopam philosophia cu, ex eos delicata tractatos. Qui regione meliore ea.</li></ul>

Window.open function allowing to resize the widow after setting the resizable property as 0

Modern day browsers can block window.open settings. There are no ways to override it unless you manually go to the user's computer and uncheck the checkbox for them.

Pop up windows should be avoided in this day and age. Modal layers placed on the page that are updated with Ajax or iframes can do the same thing and have no size, menubar, and other restrictions placed on them.