Как использовать простое HTML-предложение и усатый объект в одной строке

Question

Я использую шаблоны усов для создания веб-страницы. Я заполняю данные в виде таблицы

<table style="width:765px;border-collapse: separate;border-spacing: 5px">
<tr>
 <td VALIGN=top ALIGN=left style="width:380px">a) <span  style="Display:Inline-Block">{{{[0].choice}}}</span></td>
 <td VALIGN=top ALIGN=left style="width:380px">b) <span style="Display:Inline-Block">{{{[1].choice}}}</span></td>
</tr>
<tr>
    <td VALIGN=top ALIGN=left style="width:380px">c) <span style="Display:Inline-Block">{{{[2].choice}}}</span></td>
    <td VALIGN=top ALIGN=left style="width:380px">d) <span style="Display:Inline-Block">{{{[3].choice}}}</span></td>
</tr></table>

Моя проблема в том, что когда размер данных в объекте усов больше 40 символов, тогда все в следующей строке выглядит так:

а)

Здравствуйте, я пишу большой текст, чтобы экспериментировать. Это исполнение с большим количеством символов.

Но я хочу это как

а) Привет, я пишу большой текст, чтобы экспериментировать. Это исполнение с большим количеством символов.

поэтому я хочу знать, есть ли способ получить то, что я хочу, внося изменения только в интерфейс или мне нужно добавить параметры в базу данных.

Answer 1

В этом случае проблема заключается в том, что данные, поступающие в виде усов, имеют тип HTML, т.е. <p> Hello Here I am Writing Big Text To Experiment It's performance on Higher Number of Characters</p> и из-за этого идет новая линия. так что я просто удалил эти теги p с другой страницы, которая хранит данные в базе данных, и теперь все идет хорошо.

Answer 2

То, что вы видите здесь, это поведение inline-block элемент в обстоятельствах, когда его содержимое слишком длинное для пробела, оставшегося в текущей строке - оно переходит к следующей.

Чтобы получить поведение, которое вы ищете, вы хотите использовать inline элемент вместо Другими словами, оставляя <span> должно быть достаточно стиля; по умолчанию inline элемент:

<table style="width:765px;border-collapse: separate;border-spacing: 5px">
<tr>
 <td VALIGN=top ALIGN=left style="width:380px">a) <span>{{{[0].choice}}}</span></td>
 <td VALIGN=top ALIGN=left style="width:380px">b) <span>{{{[1].choice}}}</span></td>
</tr>
<tr>
    <td VALIGN=top ALIGN=left style="width:380px">c) <span>{{{[2].choice}}}</span></td>
    <td VALIGN=top ALIGN=left style="width:380px">d) <span>{{{[3].choice}}}</span></td>
</tr></table>

Вот JSFiddle, чтобы продемонстрировать сравнение использования встроенного / встроенного блока в этом сценарии. Надеюсь это поможет! Дайте знать, если у вас появятся вопросы.