文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >为什么我的文本字符串以一种奇怪的方式换行？(HTML / CSS)

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

Stack Overflow用户
提问于 2019-03-04 17:39:56
回答 3查看 469关注 0票数 1

JSFiddle，查看详细的HTML/CSS

我认为这是相关的CSS：

代码语言：javascript
复制
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上看到的问题：

​

​

如果有什么我会期待的：

代码语言：javascript
复制
Empfänger
personenbezogener Daten

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

​

代码语言：javascript
复制
/*
 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);
}
代码语言：javascript
复制
<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>

​

html
ios
css
wkwebview
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-03-04 18:06:03

使用自定义:before和display:table-cell，请检查以下内容

​

代码语言：javascript
复制
/*
 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;
}
代码语言：javascript
复制
<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>

​

带有图像的第二个示例

​

代码语言：javascript
复制
/*
 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;
}
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2019-03-04 17:53:48

摆脱所有这些

代码语言：javascript
复制
ul {
  list-style-position: inside;
}
li span {
  padding-left: 16px;
}

和set

代码语言：javascript
复制
ul {
  padding-left: 1em;
}

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

你可能会考虑替换掉

代码语言：javascript
复制
li span {
  display: inline-table;
}

使用

代码语言：javascript
复制
li span {
  display: inline-block;
}

因为前者看起来有点陈词滥调和代码的味道

票数 2
EN

Stack Overflow用户

发布于 2019-03-04 17:43:07

正如我所检查的，您需要删除：

代码语言：javascript
复制
ul li {
    padding-top: 0px;
    padding-bottom: 16px;
    remove this > word-break: normal;
    and this > word-wrap: normal;
}

去掉所有这些：

代码语言：javascript
复制
remove all this > li span {
    display: inline-table;
    vertical-align: middle;
    padding-left: 16px;
}

图片：

​

​

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

简单地尝试一下：

代码语言：javascript
复制
ul.bullets {
    list-style: none !important;
}

ul li {
    margin-left: 10px;
}

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

ul li span {
}

截图：

​

​

(编辑:这在设备上产生了以下结果：)

​

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/54980391

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档