TechQA.

css page-break-after not working

673 views Asked by At

I try to avoid page break for multiple div title (using drupal), but page-break-after:avoid does nothing (but page-break-before:always does). is not empty, so it should work. Any hint? My code html is:

#DIV_1 {
  height: 279px;
  width: 875px;
  perspective-origin: 437.5px 139.5px;
  transform-origin: 437.5px 139.5px;
  font: normal normal normal normal 12px / normal helvetica, arial;
}
/*#DIV_1*/

#DIV_2 {
  height: 28px;
  text-align: left;
  width: 875px;
  perspective-origin: 437.5px 14px;
  transform-origin: 437.5px 14px;
  font: normal normal bold normal 24px / normal helvetica, arial;
}
/*#DIV_2*/

#DIV_3 {
  height: 251px;
  width: 875px;
  perspective-origin: 437.5px 125.5px;
  transform-origin: 437.5px 125.5px;
  font: normal normal normal normal 12px / normal helvetica, arial;
  margin: 0px 0px 10px;
}
/*#DIV_3*/

#DIV_4 {
  height: 141px;
  width: 875px;
  perspective-origin: 437.5px 70.5px;
  transform-origin: 437.5px 70.5px;
  font: normal normal normal normal 12px / normal helvetica, arial;
}
/*#DIV_4*/

#DIV_5 {
  break-after: avoid;
  height: 23px;
  text-align: left;
  width: 875px;
  perspective-origin: 437.5px 11.5px;
  transform-origin: 437.5px 11.5px;
  font: italic normal normal normal 20.4px / normal helvetica, arial;
  margin: 0px 0px 5px;
}
/*#DIV_5, #DIV_50*/

#DIV_6 {
  height: 113px;
  width: 875px;
  perspective-origin: 437.5px 56.5px;
  transform-origin: 437.5px 56.5px;
  font: normal normal normal normal 12px / normal helvetica, arial;
  margin: 0px 0px 10px;
}
/*#DIV_6*/

#TABLE_7 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 112px;
  width: 875px;
  perspective-origin: 437.5px 56.5px;
  transform-origin: 437.5px 56.5px;
  font: normal normal normal normal 12px / normal helvetica, arial;
  margin: 0px 0px 15px;
}
/*#TABLE_7*/

#CAPTION_8 {
  border-collapse: collapse;
  height: 21px;
  text-align: left;
  width: 875px;
  perspective-origin: 437.5px 10.5px;
  transform-origin: 437.5px 10.5px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 18px / normal helvetica, arial;
}
/*#CAPTION_8, #CAPTION_53*/

#THEAD_9 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 22px;
  width: 875px;
  perspective-origin: 437.5px 11px;
  transform-origin: 437.5px 11px;
  border: 0px none rgb(128, 128, 128);
  border-spacing: 2px 2px;
  font: normal normal normal normal 12px / normal helvetica, arial;
}
/*#THEAD_9, #THEAD_54*/

#TR_10 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 22px;
  vertical-align: middle;
  width: 875px;
  perspective-origin: 437.5px 11px;
  transform-origin: 437.5px 11px;
  background: rgba(0, 0, 0, 0) linear-gradient(rgb(218, 241, 255) 0%, rgb(175, 232, 255) 100%) repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(128, 128, 128);
  border-spacing: 2px 2px;
  font: normal normal normal normal 12px / normal helvetica, arial;
}
/*#TR_10, #TR_55*/

#TH_11 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 72px;
  perspective-origin: 43px 11px;
  transform-origin: 43px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_11, #TH_12, #TH_56*/

#TH_13 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 197px;
  perspective-origin: 105.5px 11px;
  transform-origin: 105.5px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_13, #TH_58*/

#TH_14 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 110px;
  perspective-origin: 62px 11px;
  transform-origin: 62px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_14, #TH_59*/

#TH_15 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 165px;
  perspective-origin: 89.5px 11px;
  transform-origin: 89.5px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_15, #TH_60*/

#TH_16 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 77px;
  perspective-origin: 45.5px 11px;
  transform-origin: 45.5px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_16, #TH_61*/

#TH_17 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 84px;
  perspective-origin: 49px 11px;
  transform-origin: 49px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_17, #TH_62*/
<div id="DIV_1">
  <div id="DIV_2">
    Anoia
  </div>
  <div id="DIV_3">
    <div id="DIV_4">
      <div id="DIV_5">
        Sant Martí de Tous
      </div>
      <div id="DIV_6">
        <table id="TABLE_7">
          <caption id="CAPTION_8">
            Can Aubareda
          </caption>
          <thead id="THEAD_9">
            <tr id="TR_10">
              <th id="TH_11">
                Data inici
              </th>
              <th id="TH_12">
                Data fi
              </th>
              <th id="TH_13">
                Entitat
              </th>
              <th id="TH_14">
                Municipi
              </th>
              <th id="TH_15">
                Contacte
              </th>
              <th id="TH_16">
                Telèfon
              </th>
              <th id="TH_17">
                Persones
              </th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>

css page-break
Original Q&A
3

There are 3 answers

2
Luiz Rossi On

try to add #DIV_2 {display: inline} but is always better you use the appropriate html element, in case of div replace it for span is a better solution, because div is a block element.

4
jafarbtech On

Use display: inline; in both #DIV_2,#DIV_3,#DIV_4,#DIV_5 to make Anoia Sant Martí de Tous in the same line

to get Can Aubareda in the same line use the same for #DIV_6, table, caption. but I wont recommend you that because you should not make a table to be displayed as inline

#DIV_1 {
  height: 279px;
  width: 875px;
  perspective-origin: 437.5px 139.5px;
  transform-origin: 437.5px 139.5px;
  font: normal normal normal normal 12px / normal helvetica, arial;
}
/*#DIV_1*/

#DIV_2 {
    display: inline;
  height: 28px;
  text-align: left;
  width: 875px;
  perspective-origin: 437.5px 14px;
  transform-origin: 437.5px 14px;
  font: normal normal bold normal 24px / normal helvetica, arial;
}
/*#DIV_2*/

#DIV_3 {
    display: inline;
  height: 251px;
  width: 875px;
  perspective-origin: 437.5px 125.5px;
  transform-origin: 437.5px 125.5px;
  font: normal normal normal normal 12px / normal helvetica, arial;
  margin: 0px 0px 10px;
}
/*#DIV_3*/

#DIV_4 {
    display: inline;
  height: 141px;
  width: 875px;
  perspective-origin: 437.5px 70.5px;
  transform-origin: 437.5px 70.5px;
  font: normal normal normal normal 12px / normal helvetica, arial;
}
/*#DIV_4*/

#DIV_5 {
    display: inline;
  break-after: avoid;
  height: 23px;
  text-align: left;
  width: 875px;
  perspective-origin: 437.5px 11.5px;
  transform-origin: 437.5px 11.5px;
  font: italic normal normal normal 20.4px / normal helvetica, arial;
  margin: 0px 0px 5px;
}
/*#DIV_5, #DIV_50*/

#DIV_6 {
  height: 113px;
  width: 875px;
  perspective-origin: 437.5px 56.5px;
  transform-origin: 437.5px 56.5px;
  font: normal normal normal normal 12px / normal helvetica, arial;
  margin: 0px 0px 10px;
}
/*#DIV_6*/

#TABLE_7 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 112px;
  width: 875px;
  perspective-origin: 437.5px 56.5px;
  transform-origin: 437.5px 56.5px;
  font: normal normal normal normal 12px / normal helvetica, arial;
  margin: 0px 0px 15px;
}
/*#TABLE_7*/

#CAPTION_8 {
  border-collapse: collapse;
  height: 21px;
  text-align: left;
  width: 875px;
  perspective-origin: 437.5px 10.5px;
  transform-origin: 437.5px 10.5px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 18px / normal helvetica, arial;
}
/*#CAPTION_8, #CAPTION_53*/

#THEAD_9 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 22px;
  width: 875px;
  perspective-origin: 437.5px 11px;
  transform-origin: 437.5px 11px;
  border: 0px none rgb(128, 128, 128);
  border-spacing: 2px 2px;
  font: normal normal normal normal 12px / normal helvetica, arial;
}
/*#THEAD_9, #THEAD_54*/

#TR_10 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 22px;
  vertical-align: middle;
  width: 875px;
  perspective-origin: 437.5px 11px;
  transform-origin: 437.5px 11px;
  background: rgba(0, 0, 0, 0) linear-gradient(rgb(218, 241, 255) 0%, rgb(175, 232, 255) 100%) repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(128, 128, 128);
  border-spacing: 2px 2px;
  font: normal normal normal normal 12px / normal helvetica, arial;
}
/*#TR_10, #TR_55*/

#TH_11 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 72px;
  perspective-origin: 43px 11px;
  transform-origin: 43px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_11, #TH_12, #TH_56*/

#TH_13 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 197px;
  perspective-origin: 105.5px 11px;
  transform-origin: 105.5px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_13, #TH_58*/

#TH_14 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 110px;
  perspective-origin: 62px 11px;
  transform-origin: 62px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_14, #TH_59*/

#TH_15 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 165px;
  perspective-origin: 89.5px 11px;
  transform-origin: 89.5px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_15, #TH_60*/

#TH_16 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 77px;
  perspective-origin: 45.5px 11px;
  transform-origin: 45.5px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_16, #TH_61*/

#TH_17 {
  border-collapse: collapse;
  break-inside: avoid;
  height: 14px;
  text-align: left;
  vertical-align: middle;
  width: 84px;
  perspective-origin: 49px 11px;
  transform-origin: 49px 11px;
  border-spacing: 2px 2px;
  font: normal normal bold normal 12px / normal helvetica, arial;
  padding: 4px 7px;
}
/*#TH_17, #TH_62*/
<div id="DIV_1">
  <div id="DIV_2">
    Anoia
  </div>
  <div id="DIV_3">
    <div id="DIV_4">
      <div id="DIV_5">
        Sant Martí de Tous
      </div>
      <div id="DIV_6">
        <table id="TABLE_7">
          <caption id="CAPTION_8">
            Can Aubareda
          </caption>
          <thead id="THEAD_9">
            <tr id="TR_10">
              <th id="TH_11">
                Data inici
              </th>
              <th id="TH_12">
                Data fi
              </th>
              <th id="TH_13">
                Entitat
              </th>
              <th id="TH_14">
                Municipi
              </th>
              <th id="TH_15">
                Contacte
              </th>
              <th id="TH_16">
                Telèfon
              </th>
              <th id="TH_17">
                Persones
              </th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>

1
Luiz Rossi On

change div to span is not acceptable for your case?

Related Questions in CSS

Related Questions in PAGE-BREAK

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions