为什么我的文本字符串以一种奇怪的方式换行？ (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:
 
 (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

并且所有列表项与项目符号点的边距相同，项目符号点应与其列表项内容垂直对齐。

/*
 
 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:
 
 
 */

@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:
 
 (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 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;
}

图片：

保存 fiddle : 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 {
}

截图：

（编辑：这在设备上产生了以下结果：）

Answer 2

摆脱所有这些

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:
 
 (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);
}






/*
 
 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:
 
 
 */

@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;
}

因为前者看起来有点古怪和代码味

Answer 3

使用自定义 :before 和 display:table-cell，检查下方

/*
 
 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:
 
 
 */

@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:
 
 (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>

第二个带图片的例子

/*
 
 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:
 
 
 */

@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:
 
 (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>

为什么我的文本字符串以一种奇怪的方式换行？ (HTML / CSS)

Why is my text string line-breaking in a strange way? (HTML / CSS)

html

css

ios

wkwebview