Вопросы Теги

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

Каждая функция контекста выполнения в javascript имеет контекст контекста этот параметр , который задается:

  1. Как вызывается функция ( в том числе в качестве метода объекта, использование call и применяется , использование new )
  2. Использование связывания
  3. Лексически для функций стрелок (они принимают этот своего внешнего контекста выполнения)

Каким бы ни был этот контекст области видимости, ссылается на «this».

Вы можете изменить это значение для параметра этого контекста области , используя func.call, func.apply или func.bind.

По умолчанию и что сбивает с толку большинство новичков, когда вызывающий вызывающий вызов вызывается после того, как событие добавлено в элемент DOM, контекст области это значение функции является элементом DOM.

jQuery делает это тривиальным для изменения с помощью jQuery.proxy.

1
задан mplungjan 4 March 2019 в 09:42
поделиться

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

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

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

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

[119 ] Result

0
ответ дан horseshoe7 4 March 2019 в 09:42
поделиться

Используя пользовательские :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>

Второй пример с изображением [ 1112] 

/*
 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
ответ дан Hiren Vaghasiya 4 March 2019 в 09:42
поделиться

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

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
ответ дан yunzen 4 March 2019 в 09:42
поделиться