Sam Sam - 17 days ago 6
HTML Question

Text do display on same line?

Currently a message with 200 characters is displayed properly across 2 lines on the view, however when the message has over 200 characters it displays the continued message on a new line, i want the message continued on the same line.

Please see pictures below,

enter image description here

enter image description here

<strong> @alert.AnnouncementTitle</strong>

@if (alert.AnnouncementText.Length > 200) //If condition alert is a local variable length is > 200

{

var firstPart = alert.AnnouncementText.Substring(0, 200); //Local variable first part created that gers the alert announcement text substring of 200 charectars

@Html.Raw(firstPart) //Displays firstPart of 200 charectars
}

<div class="alertMoreInfo" style="display:none">

<!--Once you remove display none then whole message just displays-->
@Html.Raw(alert.AnnouncementText.Substring(Math.Min(200, alert.AnnouncementText.Length)));

@if(alert.Notes != null)
{
foreach (var attFl in alert.Notes)
{

<i class="fa fa-download" aria-hidden="true"></i><a target="_blank" href="@Url.Action("DownloadAttachment", "Home", new { Id = attFl.Id })">@attFl.FileName</a>

}
}
<span></span>
</div>

<a href="javascript:void()" class="alertReadMore">Read more...<span class="caret"></span></a> <!--Could move this under the DIV-->

<a href="javascript:void()" class="alertReadLess" style="display:none">&nbsp;&nbsp;Read less<span class="dropup"><span class="caret"></span></span></a> <!--Could move this under the DIV-->
</div>
}

Answer

Your <div class="alertMoreInfo" style="display:none"> breaks the layout.

Instead of using a div, you could use a span, which doesn't break.

this<div class="alertMoreInfo">does</div>break

<br /> and <br />

this<span class="alertMoreInfo">does</span>not