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

Posted 2023-03-06

技术标签:

【中文标题】为啥我的文本字符串以一种奇怪的方式换行？ (HTML/CSS)【英文标题】：Why is my text string line-breaking in a strange way? (HTML / CSS)为什么我的文本字符串以一种奇怪的方式换行？ (HTML/CSS) 【发布时间】：2019-07-25 14:20:02 【问题描述】：

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

【问题讨论】：

*** 还有一个 sn-p 编辑器[<>] 注意：我也对实现相同目标的其他方法持开放态度，例如带有浮动图像项目符号的列表项的 div 类。我们使用 HTML 作为渲染方法，不是因为它需要在语义上很棒。我不建议将除顶部之外的项目符号点进行任何垂直对齐。这超出了用户的预期。如果你碰巧有一个很长的<li> 内容，用户无法分辨出新的li 是从哪里开始的，而之前的li 是从哪里结束的，因为乍一看就像一个普通的段落。一些用户甚至可能认为列表已经完全结束。这真的不是我决定的东西应该看起来如何。这就是我们有设计师的原因。在我们的应用程序正在执行的上下文中，垂直对齐的项目符号点是有意义的。 【参考方案1】：

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

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

【讨论】：

这很酷！快到了。因为线条很好，布局也如我所愿。但是，我看到您在 CSS 中呈现项目符号。我希望能够使用我们的图像，但归根结底，我也许可以使用它。 @horseshoe7 除了css，我们也可以使用图片甜蜜！感谢更新。我稍后会看一下，我认为这将是我标记为正确的解决方案。【参考方案2】：

我检查过，你需要删除：

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

截图：

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

【讨论】：

除了我希望项目符号对齐到列表项内容的中间，并且任何第二行都应该缩进与第一行相同。我已经编辑了代码并为你保存了小提琴：jsfiddle.net/e9j8Lybp/1 快到了！现在缺少的是我们正在使用的项目符号图像，并且项目符号点不再垂直对齐内容的中心。为什么在可以使用 fontawesome 或任何其他图标字体库的同时使用项目符号图像？它更适合您的服务器负载？ a) 我不是设计师 b) 没有服务器负载。图像位于应用程序包中。【参考方案3】：

摆脱所有这些

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://***.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://***.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://***.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 和代码味道

【讨论】：

太棒了！你写的越简单，你就越好。

以上是关于为啥我的文本字符串以一种奇怪的方式换行？ (HTML/CSS)的主要内容，如果未能解决你的问题，请参考以下文章

以一种奇怪的方式触地射击

SqlConnection 状态以一种奇怪的方式变化

Android：裁剪位图（以一种奇怪的方式）

QStandardItem 以一种奇怪的方式插入行

我有一个删除插入CTE以一种奇怪的方式失败

为啥我能够有条件地以一种方式调用钩子，而不能以另一种方式调用？