I have a challenge where I need to split long sentences into two lines for display, but the sentences are being fetched from a server and I am unable to utilize HTML tags like br. Currently, only half of the sentence is being displayed while the other half remains hidden.
.TextBox {
width: 96%;
height: 25px;
border: none;
padding: 0px 2%;
font-size: 17px;
color: #555;
max-width:200ch;
word-wrap:break-word;
}
Incorporated the display:table property for a cleaner solution. Check out the revised demo.
white-space, word-break, and word-wrap
More details available in the demo
p {
width: 100px;
border: 1px solid red;
}
.whiteSpace-Nowrap {
white-space: nowrap;
}
.whiteSpace-Normal {
white-space: normal;
}
.wordBreak-BreakAll {
word-break: break-all;
}
.displayTable {
display: table
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h5>{white-space: nowrap}</h5>
<p class='whiteSpace-Nowrap'>You might have <code>white-space:nowrap</code> which makes text ignore the border and continue going.</p>
<h5>{white-space: normal} or {word-break: normal} or {word-wrap: normal}</h5>
<p class='whiteSpace-Normal'>will make text wrap normally at the spaces between spaces. But if there's a long word like: supercalifragilisticexpialidocious that exceeds the width of it's container, it will only wrap at a hyphen. Sup-er-cal-i-fra-gil-is-tic-ex-pi-al-i-do-cious</p>
<hr>
<p style='border:0;width:100%;'>If you are having problems with long words, then you can use hyphens like the previous example, or try the following:</p>
<h5>{word-break: break-all} or {word-wrap: break-word}</h5>
<p class="wordBreak-BreakAll">breaks between any letters. It doesn't care where. So a word like: pneumonoultramicroscopicsilicovolcanoconiosis is chopped up and served in a thousand pieces.</p>
<hr>
<h5>{display:table}</h5>
<p class='displayTable'>behaves like a <table> so text will wrap and the container will expand vertically once text has reached it's limit horizontally.</p>
<p style='border:0;width:100%;'>The paragraph above and below have identical properties. The only difference between them is that the bottom paragraph has a long unbreakable word.</p>
<p class='displayTable'>A long word like: Antidisestablishmentarianism will not break out of the border. Instead, it will accommodate that unbreakable word by expanding.</p>
</body>
</html>To display HTML content, you have the option to use either an input field or a textarea. An input field allows for only one line of text (refer to example 1), while a textarea can accommodate multiple lines (refer to example 2).
Example 1:
.TextBox {
width: 96%;
height: 25px;
border: none;
padding: 0px 2%;
font-size: 17px;
color: #555;
max-width:200ch;
word-wrap:break-word;
}<input id="idSeqQue" type="text" readonly name="firstname" data-role="none" class="TextBox" placeholder="Given" value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirdmo...". />Example 2:
.TextBox {
width: 96%;
height: 100px;
border: none;
padding: 0px 2%;
font-size: 17px;
color: #555;
max-width:200ch;
word-wrap:break-word;
}<textarea id="idSeqQue" type="text" cols="10" readonly name="firstname" data-role="none" class="TextBox" placeholder="Given">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore ma...eut duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimatasanctus est Lorem ipsum dolor sit amet."</textarea>One potential solution is to include the CSS properties `word-wrap: break-word;` and `word-break: hyphenate;` in your code.
.container {
padding: 20px;
background: #eaeaea;
max-width: 400px;
margin: 50px auto;
}
.text-overflow-1 {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.text-overflow-2 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 150px;
}<div class="container">
<p class="text-overflow-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>
<div class="container">
<p class="text-overflow-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>If you have any ideas for a different title, please share. Check out this JSFiddle to see the issue in action: http://jsfiddle.net/VXsAg/ Essentially, my challenge is creating an element with a fixed height and width that expands horizontally as needed. ...
I've implemented drag and drop functionality for saving images, but I'm facing an issue with getting an instant preview of the saved images. Whenever I try to send the image to the server using an ajax request, the image doesn't appear on th ...
I was attempting to center these 4 divs inside a container both horizontally and vertically, but they are stuck at the top edge of the <div>. They aren't moving down and remain fixed at the top. /* Footer */ #footer { width: 100%; hei ...
Having trouble placing a select menu in a Popper. The issue is that the nested select menu wants to mount the popup as a sibling on the body rather than a child of the popper, causing the clickaway event to fire unexpectedly. Here's the code snippet f ...
I am currently working with a trio of apps and scripts. The first app allows the user to choose a value, which is then passed on to the second script. This script fetches data from a database and generates XML, which is subsequently posted to an Eclipse/J ...
Hello everyone, I'm looking to extract the longitude and latitude values from my JavaScript code and assign them to PHP variables $lat and $lng. This way, I can retrieve the city name and use it in my SQL query (query not provided). Below is the scrip ...
Below is the code containing a Select: http://jsfiddle.net/pdkg1mzo/18/ The issue I'm facing is that I need to trigger an alert every time a select option is clicked, even if the clicked option is already selected. ...
I've been searching high and low for an example that matches my current issue, but so far, no luck. I'm attempting to design a collapsible side navigation with multiple levels in bootstrap using bootstrap.js. The problem I'm facing is that ...
element, I have created an MVC4 Web API application that features an Api Controller and a Code-First EF5 database. Additionally, I have implemented several JavaScript functions to enhance the functionality of my app, including Ajax Calls for the Web Api S ...
My menu has the following CSS properties: #header { width: 100%; position: fixed; z-index: 9000; overflow: auto; } With these CSS properties, the element #header will always stay on top, regardless of scrolling. My goal is to add a bottom box sha ...
I am attempting to add particle js as the background for my website. I have tried implementing this code snippet: https://codepen.io/nikspatel/pen/aJGqpv My CSS includes: position: fixed; z-index: -10; in order to keep the particles fixed on the screen e ...
css code #intro { position: relative; background-attachment: fixed; background-repeat: no-repeat; background-position: center top; -webkit-background-size: cover; -moz-background-size: cover; backgr ...
Basically, I have a div that is positioned absolutely and has multiple children elements. This div can be scrolled horizontally to see all its content, but the scrollbar hangs off the bottom, hiding the bottom border radius. Here is the HTML code: <ul ...
I am looking to animate a circle using the ctx.arc(10, 10, 15, 0, Math.PI*2, true); method and have it flow downwards without losing its trail. The image below illustrates this clearly: As shown in the image, the circle is continuously moving downwards o ...
Developing a delivery service Web App with Google Map API. Everything was smooth sailing until I introduced multi-dimensional array as LatLng Reference. Now, I'm encountering a strange error -- "InvalidValueError: not a LatLng or LatLngLiteral" I pr ...
I am currently working with an array of elements that I need to iterate over. For each element, I create a <td></td> tag. When dealing with 10 elements, it results in a table with one column and 10 rows. Is there a method, using either HTML o ...
I am currently developing a page that extracts data from an HTML table consisting of two columns and an index of a form, and then converts it into a JSON string. The intention is to pass this data into PHP for further processing, perform calculations on th ...
I am looking for a way to ensure that when the tooltip width exceeds the browser's viewable area, it will automatically reposition itself so that the content can be fully viewed. It is important that the tooltip does not overlap on the referenced div ...
My website features a transparent bootstrap navbar, with the hero header as the second element on the page set at a -50 margin to place it behind the menu, creating the desired effect. However, I have encountered an issue on certain pages where there is n ...
I've come across a challenge with my HTML images - they have a white background that I need to remove. My initial thought is to make all white pixels transparent, however, I'm unsure of how to do this using only HTML and JavaScript. Any advice wo ...