Почему моя строка текста странным образом ломается?(HTML / CSS) - PullRequest
Новая
       9

Почему моя строка текста странным образом ломается?(HTML / CSS)

0 голосов
/ 04 марта 2019

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:

HTML Rendering Problem

Во всяком случае, я бы ожидал: 

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>

Ответы [ 3 ]

0 голосов
/ 04 марта 2019

Избавьтесь от всех этих 

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

, так как первый выглядит немного хакерскими вонючий код

0 голосов
/ 04 марта 2019

Используя пользовательские :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>
0 голосов
/ 04 марта 2019

как я проверил, вам нужно удалить: 

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

Изображение:

enter image description here

Сохранение скрипки: 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 {
}

Снимок экрана:

enter image description here

(РЕДАКТИРОВАТЬ: Это привело к следующему результат на устройстве:)

Result

...