Как отформатировать HTML-текст, чтобы он охватывал ключевые слова
Итак, у меня есть код с абзацем с ключевыми словами и текстом.
Мне нужно сделать формат так, чтобы ключевые слова отображались рядом с другими, текст начинался там, где заканчиваются ключевые слова, а затем текст также обтекал ключевые слова.
Я попробовал сделать это с помощью display: flex, но так и не смог придумать, как добиться желаемого результата. Кроме того, текст в строке после первой должен иметь небольшой отступ слева, то есть не соответствовать началу ключевых слов.
Я размещаю здесь свой код, а также скриншот того, каким должен быть желаемый результат.
Любая помощь приветствуется. Спасибо.
.paragraph {
display: flex;
width: 320px;
}
.keywords {
display: flex;
}
.keywords .item {
font-family: "Times New Roman", Times, serif;
color: #000;
font-style: italic;
white-space: nowrap;
}
.keywords .item::after {
content: "-";
margin-left: 5px;
margin-right: 5px;
font-family: "Times New Roman", Times, serif;
font-weight: 500;
}
.text {
font-family: "Times New Roman", Times, serif;
color: #000;
font-style: italic;
font-weight: 300;
}<div class = "paragraph">
<div class = "keywords">
<div class = "item">KEYWORD 1</div>
<div class = "item">KEYWORD 2</div>
</div>
<div class = "text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>Правильный формат должен выглядеть так:
@phuzi Я попробовал код из ответа @Meher Khurana, который использует display: inline-block, но, к сожалению, не выполняет правильное форматирование. Я делаю что-то не так?
Ответы 2
Для обтекания элемента текстом в значительной степени требуется использование float.
По этой причине оболочка «абзаца» не может быть display: flex, поскольку это сводит на нет использование float. Вместо этого я использовал inline-block.
.paragraph {
display: inline-block;
width: 320px;
}
.keywords {
display: flex;
float: left;
}
.keywords .item {
font-family: "Times New Roman", Times, serif;
color: #000;
font-style: italic;
white-space: nowrap;
}
.keywords .item::after {
content: "-";
margin-left: 5px;
margin-right: 5px;
font-family: "Times New Roman", Times, serif;
font-weight: 500;
}
.text {
font-family: "Times New Roman", Times, serif;
color: #000;
font-style: italic;
font-weight: 300;
margin-left: 1em;
}<div class = "paragraph">
<div class = "keywords">
<div class = "item">KEYWORD 1</div>
<div class = "item">KEYWORD 2</div>
</div>
<div class = "text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>Есть ли способ добавить небольшое поле слева от текста под ключевыми словами?
Конечно, только что добавил margin-left: 1em...
Удалите display: flex, он делает не то, что вы хотите.
С помощью display: inline вы можете заставить все элементы отображаться один за другим.
Используя комбинацию положительных и отрицательных левых полей, вы также можете имитировать висячий отступ в абзаце.
.paragraph {
width: 320px;
margin-left: 2em; // indent the whole paragraph
}
.keywords {
display: inline;
margin-left: -2em; // Push these back over to the left
}
.keywords .item {
font-family: "Times New Roman", Times, serif;
color: #000;
font-style: italic;
white-space: nowrap;
display: inline-block;
}
.keywords .item::after {
content: "-";
margin-left: 5px;
margin-right: 5px;
font-family: "Times New Roman", Times, serif;
font-weight: 500;
}
.text {
font-family: "Times New Roman", Times, serif;
color: #000;
font-style: italic;
font-weight: 300;
display: inline;
}<div class = "paragraph">
<div class = "keywords">
<div class = "item">KEYWORD 1</div>
<div class = "item">KEYWORD 2</div>
</div>
<div class = "text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
Взгляните на
display: inline-block