為什么我的文本字符串以奇怪的方式斷行？ （HTML / CSS）

Question

JSFiddle為此詳細查看了HTML / CSS

我認為這是相關的CSS：

ul {
    list-style-position: inside;
    list-style-type: circle;
    padding-top: 16px;
    padding-left: 8px;
    padding-bottom: 5px;
}

ul li {
    padding-top: 0px;
    padding-bottom: 16px;
    word-break: normal;
    word-wrap: normal;
}

/*
 How to center the bullet vertically with the content:
 https://stackoverflow.com/a/31966278/421797
 (You also have to wrap your li content in a span tag!)
 */
li span {
    display: inline-table;
    vertical-align: middle;
    padding-left: 16px;
}

最終我不知道為什么一條額外的行似乎會被渲染為一個長文本字符串，而它應該有2-3個換行符。

上面的JSFiddle將顯示我正在使用的CSS。 它不會呈現我在iPhone SE上看到的問題：

如果有什么我期望的：

Empfänger
personenbezogener Daten

並且所有列表項與項目符號點具有相同的邊距，項目符號點應與其列表項內容垂直對齊。

 /* https://stackoverflow.com/a/3428477/421797 Makes sure the Browser isn't trying to perform its own magic. Also, You can debug this in the simulator by looking here for how to do that: https://stackoverflow.com/a/43771390/421797 */ @media screen and (max-device-width: 480px) { body { -webkit-text-size-adjust: none; } } body { padding: 20px; padding-right: 5px; margin: 0px; } #content { padding: 0px; color: #46484d; background-color: white; font-family: Helvetica, sans-serif; font-size: 17px; line-height: 27px; letter-spacing: -0.24px; } p { padding: 0px; margin: 0px; } a { color: #3d78fe; text-decoration: none; } p.header {} p.footer {} ul { list-style-position: inside; list-style-type: circle; padding-top: 16px; padding-left: 8px; padding-bottom: 5px; } ul li { padding-top: 0px; padding-bottom: 16px; word-break: normal; word-wrap: normal; } /* How to center the bullet vertically with the content: https://stackoverflow.com/a/31966278/421797 (You also have to wrap your li content in a span tag!) */ li span { display: inline-table; vertical-align: middle; padding-left: 16px; } /* How to choose different images depending on screen properties https://www.html5rocks.com/en/mobile/high-dpi/ */ ul.bullets { list-style-image: -webkit-image-set( url("ovalCopy.png") 1x, url("ovalCopy@2x.png") 2x, url("ovalCopy@3x.png") 3x); } 

 <meta name="viewport" content="width=device-width; initial-scale=1.0;" /> <div id="content"> <p class="header"> Blahblahblah, I redacted this for our product in test. </p> <ul class="bullets"> <li><span>Datenkategorien</span></li> <li><span>Zwecke der Datenverarbeitung</span></li> <li><span>Empfänger personenbezogener Daten</span></li> </ul> <p class="footer"> Etwas unklar? <a href="getInTouch">Schreib uns.</a> </p> </div> 

Answer 1

擺脫所有這些

ul {
  list-style-position: inside;
}
li span {
  padding-left: 16px;
}

並設定

ul {
  padding-left: 1em;
}

 ul { /* list-style-position: inside; */ list-style-type: circle; padding-top: 16px; padding-left: 1em; padding-bottom: 5px; } ul li { padding-top: 0px; padding-bottom: 16px; word-break: normal; word-wrap: normal; } /* How to center the bullet vertically with the content: https://stackoverflow.com/a/31966278/421797 (You also have to wrap your li content in a span tag!) */ li span { display: inline-table; vertical-align: middle; /* padding-left: 16px; */ } /* How to choose different images depending on screen properties https://www.html5rocks.com/en/mobile/high-dpi/ */ ul.bullets { list-style-image: -webkit-image-set( url("ovalCopy.png") 1x, url("ovalCopy@2x.png") 2x, url("ovalCopy@3x.png") 3x); } /* https://stackoverflow.com/a/3428477/421797 Makes sure the Browser isn't trying to perform its own magic. Also, You can debug this in the simulator by looking here for how to do that: https://stackoverflow.com/a/43771390/421797 */ @media screen and (max-device-width: 480px) { body { -webkit-text-size-adjust: none; } } body { padding: 20px; padding-right: 5px; margin: 0px; } #content { padding: 0px; color: #46484d; background-color: white; font-family: Helvetica, sans-serif; font-size: 17px; line-height: 27px; letter-spacing: -0.24px; } p { padding: 0px; margin: 0px; } 

 <div id="content"> <p class="header"> Blahblahblah, I redacted this for our product in test. </p> <ul class="bullets"> <li><span>Datenkategorien</span></li> <li><span>Zwecke der Datenverarbeitung</span></li> <li><span>Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten Empfänger personenbezogener Daten</span></li> </ul> <p class="footer"> Etwas unklar? <a href="getInTouch">Schreib uns.</a> </p> </div> 

您可能會想到替換

li span {
  display: inline-table;
}

同

li span {
  display: inline-block;
}

因為前者看起來有點hacky和代碼臭

Answer 2

使用custom :before和display:table-cell ，請查看下面的內容

 /* https://stackoverflow.com/a/3428477/421797 Makes sure the Browser isn't trying to perform its own magic. Also, You can debug this in the simulator by looking here for how to do that: https://stackoverflow.com/a/43771390/421797 */ @media screen and (max-device-width: 480px) { body { -webkit-text-size-adjust: none; } } body { padding: 20px; padding-right: 5px; margin: 0px; } #content { padding: 0px; color: #46484d; background-color: white; font-family: Helvetica, sans-serif; font-size: 17px; line-height: 27px; letter-spacing: -0.24px; } p { padding: 0px; margin: 0px; } a { color: #3d78fe; text-decoration: none; } p.header {} p.footer {} ul { list-style-position: inside; list-style-type: circle; padding-top: 16px; padding-left: 8px; padding-bottom: 5px; } ul li { padding: 15px 0px 15px 20px; word-break: normal; word-wrap: normal; display:table; position:relative; } ul li:before { position: absolute; top:calc(50% - 3px); margin: 0px 0 0 -12px; vertical-align: middle; display: table-cell; width: 6px; height: 6px; border:1px solid #000000; content: ""; border-radius:100%; } /* How to center the bullet vertically with the content: https://stackoverflow.com/a/31966278/421797 (You also have to wrap your li content in a span tag!) */ li span { display: table-cell; vertical-align: middle; padding-left: 16px; } /* How to choose different images depending on screen properties https://www.html5rocks.com/en/mobile/high-dpi/ */ ul.bullets { list-style:none; } 

 <meta name="viewport" content="width=device-width; initial-scale=1.0;" /> <div id="content"> <p class="header"> Blahblahblah, I redacted this for our product in test. </p> <ul class="bullets"> <li><span>Datenkategorien</span></li> <li><span>Zwecke der Datenverarbeitung</span></li> <li><span>Empfänger personenbezogener Daten Empfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener Daten</span></li> </ul> <p class="footer"> Etwas unklar? <a href="getInTouch">Schreib uns.</a> </p> </div> 

圖像的第二個例子

 /* https://stackoverflow.com/a/3428477/421797 Makes sure the Browser isn't trying to perform its own magic. Also, You can debug this in the simulator by looking here for how to do that: https://stackoverflow.com/a/43771390/421797 */ @media screen and (max-device-width: 480px) { body { -webkit-text-size-adjust: none; } } body { padding: 20px; padding-right: 5px; margin: 0px; } #content { padding: 0px; color: #46484d; background-color: white; font-family: Helvetica, sans-serif; font-size: 17px; line-height: 27px; letter-spacing: -0.24px; } p { padding: 0px; margin: 0px; } a { color: #3d78fe; text-decoration: none; } p.header {} p.footer {} ul { list-style-position: inside; list-style-type: circle; padding-top: 16px; padding-left: 8px; padding-bottom: 5px; } ul li { padding: 15px 0px 15px 20px; word-break: normal; word-wrap: normal; display:table; position:relative; } ul li:before { position: absolute; top:calc(50% - 3px); margin: 0px 0 0 -12px; vertical-align: middle; display: table-cell; content: ""; width: 6px; height: 6px; background: transparent url('http://placehold.jp/3d4070/ffffff/6x6.png?css=%7B%22border-radius%22%3A%2215px%22%7D') no-repeat; } /* How to center the bullet vertically with the content: https://stackoverflow.com/a/31966278/421797 (You also have to wrap your li content in a span tag!) */ li span { display: table-cell; vertical-align: middle; padding-left: 16px; } /* How to choose different images depending on screen properties https://www.html5rocks.com/en/mobile/high-dpi/ */ ul.bullets { list-style:none; } 

 <meta name="viewport" content="width=device-width; initial-scale=1.0;" /> <div id="content"> <p class="header"> Blahblahblah, I redacted this for our product in test. </p> <ul class="bullets"> <li><span>Datenkategorien</span></li> <li><span>Zwecke der Datenverarbeitung</span></li> <li><span>Empfänger personenbezogener Daten Empfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener DatenEmpfänger personenbezogener Daten</span></li> </ul> <p class="footer"> Etwas unklar? <a href="getInTouch">Schreib uns.</a> </p> </div> 

Answer 3

當我檢查時，你需要刪除：

ul li {
    padding-top: 0px;
    padding-bottom: 16px;
    remove this > word-break: normal;
    and this > word-wrap: normal;
}

並刪除所有這些：

remove all this > li span {
    display: inline-table;
    vertical-align: middle;
    padding-left: 16px;
}

圖片 ：

保存小提琴： https ： //jsfiddle.net/u3shocnv/

試試這個：

ul.bullets {
    list-style: none !important;
}

ul li {
    margin-left: 10px;
}

ul li::before {
    content: '•';
    position: absolute;
    left: 20px;
}

ul li span {
}

截圖：

（編輯：這在設備上產生了以下結果:)