Перенос текста HTML и CSS с некоторыми элементами, стилизованными иначе, чем другие

#html #css

#HTML #css

Вопрос:

Я хочу иметь контейнер фиксированной ширины, теги должны иметь другой стиль, но переноситься внутри контейнера. Есть идеи?

 div {
  width: 200px;
  background-color: rgba(0,0,0,0.6);
  margin: 10px;
  padding: 10px;
}
p {
  margin: 0px;
  color: white;
  font-family: sans-serif;
  font-weight: 100;
}
p:nth-child(1) {
  font-weight: 600;  
}

 <div>
  <p>This Text in BOLD.</p>
  <p>And we want this in normal weight but we want it to wrap as it is doing in the second example.</p>
</div>
<div>
  <p>This Text in BOLD. And we want this in normal weight but we want it to wrap as it is doing in the second example.</p>
</div>

1. зависит от шрифта…. sans-serif зависит от операционной системы / браузера.

2. чего именно вы хотите?

3. Похоже, вам нужно использовать <span> и classes , чтобы получить результаты, которые вы ищете. не все можно сделать с помощью простого <p>

4. Если вы знаете , с каким фактическим изменением размеров символов вы могли бы поиграть letter-spacing , но, честно говоря, это проигранная битва, и она полностью зависит от шрифта. Текст будет переноситься туда, куда он хочет в основном.

5. @Paulie_D ch изменяется ли единица измерения в зависимости от веса шрифта?

Ответ №1:

 div {
  width: 200px;
  background-color: rgba(0,0,0,0.6);
  margin: 10px;
  padding: 10px;
}
p{
  margin: 0px;
  color: white;
  font-family: sans-serif;
  font-weight: 100;      
}
span {
  font-weight: 600;
}

 <div>
  <p><span>This Text in BOLD.</span> And we want this in normal weight but we want it to wrap as it is doing in the second example.</p>
</div>

Ответ №2:

Использовать идентификаторы? Смотрите ниже.

 div {
  width: 200px;
  background-color: rgba(0,0,0,0.6);
  margin: 10px;
  padding: 10px;
}
p{
  margin: 0px;
  color: white;
  font-family: sans-serif;
}
p#one {
  font-weight: 100;
}
p#two {
  font-weight: 600;  
}

 <div>
  <p>This Text in BOLD.</p>
  <p id="one">And we want this in normal weight but we want it to wrap as it is doing in the second example.</p>
</div>
<div>
  <p id="two">This Text in BOLD. And we want this in normal weight but we want it to wrap as it is doing in the second example.</p>
</div>

Ответ №3:

Проблема, по-видимому, заключается в том, что тег p автоматически заполняет пространство справа, если не задана ширина, поэтому мы решаем проблему, не используя теги p, в моем случае я решил использовать теги d, но их было бы много на выбор.

 div {
  width: 200px;
  background-color: rgba(0,0,0,0.6);
  margin: 10px;
  padding: 10px;
}
d {
  margin: 0px;
  color: white;
  font-family: sans-serif;
  font-weight: 100;
}
d:nth-child(1) {
  font-weight: 600;  
}

 <div>
  <d>This Text in BOLD.</d>
  <d>And we want this in normal weight but we want it to wrap as it is doing in the second example.</d>
</div>
<div>
  <d>This Text in BOLD. And we want this in normal weight but we want it to wrap as it is doing in the second example.</d>
</div>

Ответ №4:

Вы могли бы использовать display:inline; это выравнивание p tag по inline box elements и, таким образом, выровнять ваш вывод так, как вы хотите.

дисплей: встроенный — элемент генерирует одно или несколько встроенных полей элементов.

 div:nth-child(1) > p:nth-child(1) {
      font-weight: 600;  
      display:inline;
}
div:nth-child(1) > p:nth-child(2) {
       margin:0;
       display:inline;
}

 div {
  width: 200px;
  background-color: rgba(0,0,0,0.6);
  margin: 10px;
  padding: 10px;
}
p {
  margin: 0px;
  color: white;
  font-family: sans-serif;
  font-weight: 100;
}
div:nth-child(1) > p:nth-child(1) {
  font-weight: 600;  
  display:inline;
}
div:nth-child(1) > p:nth-child(2) {
   margin:0;
   display:inline;
}

 <div>
  <p>This Text in BOLD.</p>
  <p>And we want this in normal weight but we want it to wrap as it is doing in the second example.</p>
</div>
<div>
  <p>This Text in BOLD. And we want this in normal weight but we want it to wrap as it is doing in the second example.</p>
</div>