{"id":18734327,"url":"https://github.com/threespot/unorphanize","last_synced_at":"2025-11-15T00:30:18.153Z","repository":{"id":57166388,"uuid":"124095579","full_name":"Threespot/unorphanize","owner":"Threespot","description":"Prevent orphaned words and icons","archived":false,"fork":false,"pushed_at":"2020-09-04T20:48:55.000Z","size":668,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-01-29T03:37:12.243Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://threespot.github.io/unorphanize","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Threespot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-06T15:07:51.000Z","updated_at":"2020-12-15T13:39:08.000Z","dependencies_parsed_at":"2022-08-30T15:20:47.780Z","dependency_job_id":null,"html_url":"https://github.com/Threespot/unorphanize","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Threespot%2Funorphanize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Threespot%2Funorphanize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Threespot%2Funorphanize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Threespot%2Funorphanize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Threespot","download_url":"https://codeload.github.com/Threespot/unorphanize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239605751,"owners_count":19667111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T15:13:01.950Z","updated_at":"2025-11-15T00:30:18.105Z","avatar_url":"https://github.com/Threespot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Unorphanize\n[![npm](https://badge.fury.io/js/%40threespot%2Funorphanize.svg)](https://www.npmjs.com/package/@threespot/unorphanize)\n[![Build Status](https://travis-ci.org/Threespot/unorphanize.svg?branch=master)](https://travis-ci.org/Threespot/unorphanize)\n[![Coverage Status](https://coveralls.io/repos/github/Threespot/unorphanize/badge.svg)](https://coveralls.io/github/Threespot/unorphanize)\n\nHelper function to wrap the last X words in an HTML tag to prevent them from wrapping.\n\n**Caveats**\n- This script doesn’t check if text is visible (possible future enhancement)\n- Using this inside of links or headings could cause issues in VoiceOver on iOS\n  - See http://axesslab.com/text-splitting/ for solutions\n\n## Install\n\n```bash\nyarn add @threespot/unorphanize\n```\n\n## Usage\n\n```js\n// ES6 module\nimport Unorphanize from \"@threespot/unorphanize\";\n\n// For transpiled ES5 code, import this file:\n// import Unorphanize from \"@threespot/unorphanize/dist/unorphanize.m\";\n\nconst nodes = document.querySelectorAll(\"[data-orphans]\");\n\nnodes.forEach(function(el) {\n  var u = new Unorphanize(el, {\n    wordCount: 2, // number of words to prevent wrapping [default: 2]\n    wrapEl: \"span\", // wrapper element tag [default: \"span\"]\n    inlineStyles: true, // Add “white-space: nowrap;” to elements as inline style [default: true]\n    className: \"custom-class\", // Custom class to add to wrapper [default: \"\"]\n    append: \"\" // HTML to append to wrapper [default: \"\"]\n  });\n});\n```\n\n**Example:**\n\n```html\n\u003cp data-orphans\u003eFirst second third fourth \u003cb\u003efifth\u003c/b\u003e \u003ci\u003esixth\u003c/i\u003e.\u003c/p\u003e\n```\n\n**Becomes:**\n\n```html\n\u003cp data-orphans\u003eFirst second third fourth \u003cspan class=\"custom-class\" style=\"white-space: nowrap !important;\"\u003e\u003cb\u003efifth\u003c/b\u003e \u003ci\u003esixth\u003c/i\u003e.\u003c/span\u003e\u003c/p\u003e\n```\n\n---\n\nTo support setting `wordCount` in the HTML, you could do something like this:\n\n```js\nimport Unorphanize from \"@threespot/unorphanize\";\n\nconst nodes = document.querySelectorAll(\"[data-orphans]\");\n\nnodes.forEach(function(el) {\n  const options = {};\n\n  // Check for custom word count\n  const wordCount = el.getAttribute(\"data-orphans\");\n\n  // Set custom word count if defined (defaults to 2)\n  if (wordCount) {\n    options.wordCount = wordCount;\n  }\n\n  var u = new Unorphanize(el, options);\n});\n\n```\n**Example:**\n\n```html\n\u003cp data-orphans=\"3\"\u003eFirst second third fourth fifth sixth.\u003c/p\u003e\n```\n\n**Becomes:**\n\n```html\n\u003cp data-orphans=\"3\"\u003eFirst second third \u003cspan style=\"white-space: nowrap !important;\"\u003efourth fifth sixth.\u003c/span\u003e\u003c/p\u003e\n```\n\n---\n\nWe recommend using a **custom class** instead of inline styles to allow wrapping in small viewports.\n\n```js\nconst nodes = document.querySelectorAll(\"[data-orphans]\");\n\nnodes.forEach(function(el) {\n  var u = new Unorphanize(el, {\n    inlineStyles: false,\n    className: \"nowrap\"\n  });\n});\n```\n\n**Example CSS**\n\n```css\n@media all and (min-width: 320px) {\n  .nowrap {\n    white-space: nowrap !important;\n  }\n}\n```\n\n**Example HTML:**\n\n```html\n\u003cp data-orphans\u003eFirst second third fourth.\u003c/p\u003e\n```\n\n**Becomes:**\n\n```html\n\u003cp data-orphans\u003eFirst second \u003cspan class=\"nowrap\"\u003ethird fourth.\u003c/span\u003e\u003c/p\u003e\n```\n\n## License\n\nUnorphanize is free software and may be redistributed under the terms of the [MIT license](https://github.com/Threespot/unorphanize/blob/master/LICENSE.md).\n\n## About Threespot\n\nThreespot is an independent digital agency hell-bent on helping those, and only those, who are committed to helping others. Find out more at [https://www.threespot.com](https://www.threespot.com).\n\n[![Threespot](https://avatars3.githubusercontent.com/u/370822?v=3\u0026s=100)](https://www.threespot.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreespot%2Funorphanize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthreespot%2Funorphanize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreespot%2Funorphanize/lists"}