diff --git a/changelog_unreleased/html/11827.md b/changelog_unreleased/html/11827.md
new file mode 100644
index 000000000..64380852e
--- /dev/null
+++ b/changelog_unreleased/html/11827.md
@@ -0,0 +1 @@
+#### Reverts #7865, keeping class names on the same line (#11827 by @jlongster)
diff --git a/src/language-html/syntax-attribute.js b/src/language-html/syntax-attribute.js
index 130d77855..47de2e84d 100644
--- a/src/language-html/syntax-attribute.js
+++ b/src/language-html/syntax-attribute.js
@@ -1,9 +1,8 @@
 "use strict";
 
 const parseSrcset = require("parse-srcset");
-const getLast = require("../utils/get-last.js");
 const {
-  builders: { group, ifBreak, indent, join, line, softline },
+  builders: { ifBreak, join, line },
 } = require("../document/index.js");
 
 function printImgSrcset(value) {
@@ -60,50 +59,8 @@ function printImgSrcset(value) {
   );
 }
 
-const prefixDelimiters = [":", "__", "--", "_", "-"];
-
-function getClassPrefix(className) {
-  const startIndex = className.search(/[^_-]/);
-  if (startIndex !== -1) {
-    for (const delimiter of prefixDelimiters) {
-      const delimiterIndex = className.indexOf(delimiter, startIndex);
-      if (delimiterIndex !== -1) {
-        return className.slice(0, delimiterIndex);
-      }
-    }
-  }
-  return className;
-}
-
 function printClassNames(value) {
-  const classNames = value.trim().split(/\s+/);
-
-  // Try keeping consecutive classes with the same prefix on one line.
-  const groupedByPrefix = [];
-  let previousPrefix;
-  for (let i = 0; i < classNames.length; i++) {
-    const prefix = getClassPrefix(classNames[i]);
-    if (
-      prefix !== previousPrefix &&
-      // "home-link" and "home-link_blue_yes" should be considered same-prefix
-      prefix !== classNames[i - 1]
-    ) {
-      groupedByPrefix.push([]);
-    }
-    getLast(groupedByPrefix).push(classNames[i]);
-    previousPrefix = prefix;
-  }
-
-  return [
-    indent([
-      softline,
-      join(
-        line,
-        groupedByPrefix.map((classNames) => group(join(line, classNames)))
-      ),
-    ]),
-    softline,
-  ];
+  return value.trim().split(/\s+/).join(" ");
 }
 
 module.exports = {
diff --git a/tests/format/angular/angular/__snapshots__/jsfmt.spec.js.snap b/tests/format/angular/angular/__snapshots__/jsfmt.spec.js.snap
index 0f0b5368a..da59661d4 100644
--- a/tests/format/angular/angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/angular/angular/__snapshots__/jsfmt.spec.js.snap
@@ -110,9 +110,7 @@ printWidth: 1
 </div>
 
 <div
-  class="
-    common--error-message
-  "
+  class="common--error-message"
   test-hook="upper-error-message"
   ng-if="
     !$ctrl.showsFormBelowPlain() &&
@@ -3471,16 +3469,7 @@ printWidth: 1
   }}
 </label>
 <div
-  class="
-    Nemo
-    possimus
-    non
-    voluptates
-    dicta
-    accusamus
-    id
-    quia
-  "
+  class="Nemo possimus non voluptates dicta accusamus id quia"
 >
   {{
     copyTypes[
@@ -8063,9 +8052,7 @@ can be found in the LICENSE file at http://angular.io/license
 </p>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -8086,9 +8073,7 @@ can be found in the LICENSE file at http://angular.io/license
   [hidden]="isUnchanged")
 </p>
 <div
-  class="
-    context
-  "
+  class="context"
 >
   {{
     title
@@ -8135,9 +8120,7 @@ can be found in the LICENSE file at http://angular.io/license
   (keyup)="
     (0)
   "
-  class="
-    context
-  "
+  class="context"
 >
   Type
   something:
@@ -8150,9 +8133,7 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -8174,9 +8155,7 @@ can be found in the LICENSE file at http://angular.io/license
   )
 </p>
 <div
-  class="
-    context
-  "
+  class="context"
 >
   <button
     (click)="
@@ -8195,9 +8174,7 @@ can be found in the LICENSE file at http://angular.io/license
   context
 </p>
 <div
-  class="
-    context
-  "
+  class="context"
 >
   <button
     (click)="
@@ -8221,9 +8198,7 @@ can be found in the LICENSE file at http://angular.io/license
 </p>
 <!-- template hides the following; plenty of examples later -->
 <div
-  class="
-    context
-  "
+  class="context"
 >
   <button
     *ngFor="
@@ -8250,9 +8225,7 @@ can be found in the LICENSE file at http://angular.io/license
   (#heroForm)
 </p>
 <div
-  class="
-    context
-  "
+  class="context"
 >
   <form
     #heroForm
@@ -8267,9 +8240,7 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -8287,9 +8258,7 @@ can be found in the LICENSE file at http://angular.io/license
 <!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
 <!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
 <div
-  class="
-    special
-  "
+  class="special"
 >
   Mental
   Model
@@ -8307,9 +8276,7 @@ can be found in the LICENSE file at http://angular.io/license
 <div>
   <!-- Normal HTML -->
   <div
-    class="
-      special
-    "
+    class="special"
   >
     Mental
     Model
@@ -8421,9 +8388,7 @@ can be found in the LICENSE file at http://angular.io/license
 </button>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -8466,9 +8431,7 @@ can be found in the LICENSE file at http://angular.io/license
 />
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -8545,9 +8508,7 @@ can be found in the LICENSE file at http://angular.io/license
 </button>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -8709,9 +8670,7 @@ can be found in the LICENSE file at http://angular.io/license
 </p>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -8805,9 +8764,7 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -8823,11 +8780,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <!-- standard class attribute setting  -->
 <div
-  class="
-    bad
-    curly
-    special
-  "
+  class="bad curly special"
 >
   Bad
   curly
@@ -8836,11 +8789,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <!-- reset/override all class names with a binding  -->
 <div
-  class="
-    bad
-    curly
-    special
-  "
+  class="bad curly special"
   [class]="
     badCurly
   "
@@ -8864,9 +8813,7 @@ can be found in the LICENSE file at http://angular.io/license
 
 <!-- binding to \`class.special\` trumps the class attribute -->
 <div
-  class="
-    special
-  "
+  class="special"
   [class.special]="
     !isSpecial
   "
@@ -8893,9 +8840,7 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -8948,9 +8893,7 @@ can be found in the LICENSE file at http://angular.io/license
 </button>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -9025,9 +8968,7 @@ can be found in the LICENSE file at http://angular.io/license
 </app-big-hero-detail>
 
 <div
-  class="
-    parent-div
-  "
+  class="parent-div"
   (click)="
     onClickMe(
       $event
@@ -9038,9 +8979,7 @@ can be found in the LICENSE file at http://angular.io/license
   Click
   me
   <div
-    class="
-      child-div
-    "
+    class="child-div"
   >
     Click
     me
@@ -9087,9 +9026,7 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -9147,9 +9084,7 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -9222,9 +9157,7 @@ bindon-ngModel
 (ngModelChange)="setUppercaseName($event)"
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -9349,11 +9282,7 @@ bindon-ngModel
 </div>
 
 <div
-  class="
-    bad
-    curly
-    special
-  "
+  class="bad curly special"
 >
   Bad
   curly
@@ -9371,9 +9300,7 @@ bindon-ngModel
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -9506,9 +9433,7 @@ bindon-ngModel
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -9636,9 +9561,7 @@ bindon-ngModel
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -9653,9 +9576,7 @@ bindon-ngModel
 </h2>
 
 <div
-  class="
-    box
-  "
+  class="box"
 >
   <div
     *ngFor="
@@ -9670,9 +9591,7 @@ bindon-ngModel
 <br />
 
 <div
-  class="
-    box
-  "
+  class="box"
 >
   <!-- *ngFor w/ hero-detail Component -->
   <app-hero-detail
@@ -9686,9 +9605,7 @@ bindon-ngModel
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -9708,9 +9625,7 @@ bindon-ngModel
   separator
 </p>
 <div
-  class="
-    box
-  "
+  class="box"
 >
   <div
     *ngFor="
@@ -9737,9 +9652,7 @@ bindon-ngModel
   separator
 </p>
 <div
-  class="
-    box
-  "
+  class="box"
 >
   <!-- Ex: "1 - Hercules" -->
   <div
@@ -9760,9 +9673,7 @@ bindon-ngModel
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -9805,9 +9716,7 @@ bindon-ngModel
   trackBy
 </p>
 <div
-  class="
-    box
-  "
+  class="box"
 >
   <div
     #noTrackBy
@@ -9846,9 +9755,7 @@ bindon-ngModel
   trackBy
 </p>
 <div
-  class="
-    box
-  "
+  class="box"
 >
   <div
     #withTrackBy
@@ -9895,9 +9802,7 @@ bindon-ngModel
   separator
 </p>
 <div
-  class="
-    box
-  "
+  class="box"
 >
   <div
     *ngFor="
@@ -9924,9 +9829,7 @@ bindon-ngModel
   separator
 </p>
 <div
-  class="
-    box
-  "
+  class="box"
 >
   <div
     *ngFor="
@@ -9953,9 +9856,7 @@ bindon-ngModel
   separator
 </p>
 <div
-  class="
-    box
-  "
+  class="box"
 >
   <div
     *ngFor="
@@ -9981,9 +9882,7 @@ bindon-ngModel
   function
 </p>
 <div
-  class="
-    box
-  "
+  class="box"
 >
   <div
     *ngFor="
@@ -10001,9 +9900,7 @@ bindon-ngModel
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -10096,9 +9993,7 @@ bindon-ngModel
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -10166,9 +10061,7 @@ bindon-ngModel
 ></app-hero-form>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -10222,9 +10115,7 @@ bindon-ngModel
 }}
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -10302,9 +10193,7 @@ bindon-ngModel
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -10401,9 +10290,7 @@ See console log:
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -10440,9 +10327,7 @@ See console log:
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -10494,9 +10379,7 @@ See console log:
 </div>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -10558,9 +10441,7 @@ See console log:
 </p>
 
 <a
-  class="
-    to-toc
-  "
+  class="to-toc"
   href="#toc"
   >top</a
 >
@@ -10583,17 +10464,13 @@ can be found in the LICENSE file at http://angular.io/license
     #heroForm="ngForm"
   >
     <div
-      class="
-        form-group
-      "
+      class="form-group"
     >
       <label
         for="name"
         >Name
         <input
-          class="
-            form-control
-          "
+          class="form-control"
           name="name"
           required
           [(ngModel)]="
diff --git a/tests/format/html/attributes/__snapshots__/jsfmt.spec.js.snap b/tests/format/html/attributes/__snapshots__/jsfmt.spec.js.snap
index dbfbc7b90..9edc43d70 100644
--- a/tests/format/html/attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/html/attributes/__snapshots__/jsfmt.spec.js.snap
@@ -253,29 +253,17 @@ printWidth: 80
 
 =====================================output=====================================
 <div
-  class="
-    ProviderMeasuresContainer__heading-row
-    d-flex
-    flex-column flex-lg-row
-    justify-content-start justify-content-lg-between
-    align-items-start align-items-lg-center
-  "
+  class="ProviderMeasuresContainer__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
 >
   Foo
 </div>
 
 <div class="a-bem-block a-bem-block--with-modifer">
   <div
-    class="
-      a-bem-block__element a-bem-block__element--with-modifer
-      also-another-block
-    "
+    class="a-bem-block__element a-bem-block__element--with-modifer also-another-block"
   >
     <div
-      class="
-        a-bem-block__element a-bem-block__element--with-modifer
-        also-another-block__element
-      "
+      class="a-bem-block__element a-bem-block__element--with-modifer also-another-block__element"
     ></div>
   </div>
 </div>
@@ -316,11 +304,7 @@ printWidth: 80
   <div class="news__tabs">
     <h1 class="news__tab-wrapper news__head-item">
       <a
-        class="
-          home-link home-link_blue_yes
-          news__tab news__tab_selected_yes
-          mix-tabber__tab mix-tabber__tab_selected_yes
-        "
+        class="home-link home-link_blue_yes news__tab news__tab_selected_yes mix-tabber__tab mix-tabber__tab_selected_yes"
         tabindex="0"
         aria-selected="true"
         aria-controls="news_panel_news"
@@ -351,12 +335,7 @@ printWidth: 80
 
 =====================================output=====================================
 <my-tag
-  class="
-    md:foo-bg md:foo-color md:foo--sub-bg md:foo--sub-color
-    xl:foo xl:prefix2
-    --prefix2--something-else
-    unrelated_class_to_fill_80_chars
-  "
+  class="md:foo-bg md:foo-color md:foo--sub-bg md:foo--sub-color xl:foo xl:prefix2 --prefix2--something-else unrelated_class_to_fill_80_chars"
 ></my-tag>
 
 ================================================================================
@@ -374,21 +353,11 @@ printWidth: 80
 
 =====================================output=====================================
 <my-tag
-  class="
-    __prefix1__foo __prefix1__bar
-    __prefix2__foo
-    prefix2 prefix2--something
-    --prefix2--something-else
-  "
+  class="__prefix1__foo __prefix1__bar __prefix2__foo prefix2 prefix2--something --prefix2--something-else"
 ></my-tag>
 
 <my-tag
-  class="
-    --prefix1--foo --prefix1--bar
-    --prefix2--foo
-    prefix2 prefix2__something
-    __prefix2__something_else
-  "
+  class="--prefix1--foo --prefix1--bar --prefix2--foo prefix2 prefix2__something __prefix2__something_else"
 ></my-tag>
 
 ================================================================================
@@ -408,18 +377,7 @@ printWidth: 80
 =====================================output=====================================
 <div
   aria-hidden="true"
-  class="
-    border
-    rounded-1
-    flex-shrink-0
-    bg-gray
-    px-1
-    text-gray-light
-    ml-1
-    f6
-    d-none d-on-nav-focus
-    js-jump-to-badge-jump
-  "
+  class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump"
 >
   Jump to
   <span class="d-inline-block ml-1 v-align-middle">x</span>
@@ -490,41 +448,11 @@ width="205px" alt="Yahoo"/></a></h1></div></div>
 =====================================output=====================================
 <img class="foo bar" />
 
-<img class="" />
+<img class="  " />
 <img class />
 
 <img
-  class="
-    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
-    a-long-long-long-long-long-class-name
-    another-long-long-long-class-name
-    foo
-    bar
-    foo
-    bar
-    foo
-    bar
-    foo
-    bar
-    foo
-    bar
-    foo
-    bar
-    foo
-    bar
-    foo
-    bar
-    foo
-    bar
-    foo
-    bar
-    foo
-    bar
-    foo
-    bar
-    foo
-    bar
-  "
+  class="looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong a-long-long-long-long-long-class-name another-long-long-long-class-name foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar"
 />
 
 <img class="{{ ...classes }}" />
@@ -537,34 +465,10 @@ width="205px" alt="Yahoo"/></a></h1></div></div>
 <!-- from yahoo website -->
 <div
   id="header-wrapper"
-  class="
-    Bgc(#fff)
-    Bdbc(t)
-    Bdbs(s)
-    Bdbw(1px)
-    D(tb)
-    Pos(f)
-    Tbl(f)
-    W(100%)
-    Z(4)
-    has-scrolled_Bdc($c-fuji-grey-d)
-    Scrolling_Bdc($c-fuji-grey-d)
-    has-scrolled_Bxsh($headerShadow)
-    Scrolling_Bxsh($headerShadow)
-  "
+  class="Bgc(#fff) Bdbc(t) Bdbs(s) Bdbw(1px) D(tb) Pos(f) Tbl(f) W(100%) Z(4) has-scrolled_Bdc($c-fuji-grey-d) Scrolling_Bdc($c-fuji-grey-d) has-scrolled_Bxsh($headerShadow) Scrolling_Bxsh($headerShadow)"
 >
   <div
-    class="
-      Bgc(#fff)
-      M(a)
-      Maw(1301px)
-      Miw(1000px)
-      Pb(12px)
-      Pt(22px)
-      Pos(r)
-      TranslateZ(0)
-      Z(6)
-    "
+    class="Bgc(#fff) M(a) Maw(1301px) Miw(1000px) Pb(12px) Pt(22px) Pos(r) TranslateZ(0) Z(6)"
   >
     <h1 class="Fz(0) Pstart(15px) Pos(a)">
       <a
@@ -599,14 +503,7 @@ printWidth: 80
 =====================================output=====================================
 <div
   aria-hidden="true"
-  class="
-    border
-    rounded-1
-    flex-shrink-0
-    bg-gray
-    px-1
-    loooooooooooooooooooooooong
-  "
+  class="border rounded-1 flex-shrink-0 bg-gray px-1 loooooooooooooooooooooooong"
 ></div>
 
 ================================================================================
diff --git a/tests/format/html/tags/__snapshots__/jsfmt.spec.js.snap b/tests/format/html/tags/__snapshots__/jsfmt.spec.js.snap
index 77ee9accb..5e7a41abb 100644
--- a/tests/format/html/tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/html/tags/__snapshots__/jsfmt.spec.js.snap
@@ -3316,18 +3316,14 @@ printWidth: 1
 <ul>
   123
   <li
-    class="
-      foo
-    "
+    class="foo"
     id="bar"
   >
     First
   </li>
   456
   <li
-    class="
-      baz
-    "
+    class="baz"
   >
     Second
   </li>
@@ -3469,25 +3465,13 @@ printWidth: 1
 </div>
 <span>
   <i
-    class="
-      fa
-      fa-refresh
-      fa-spin
-    "
+    class="fa fa-refresh fa-spin"
   />
   <i
-    class="
-      fa
-      fa-refresh
-      fa-spin
-    "
+    class="fa fa-refresh fa-spin"
   />
   <i
-    class="
-      fa
-      fa-refresh
-      fa-spin
-    "
+    class="fa fa-refresh fa-spin"
   />
 </span>