4 Replies - 210 Views - Last Post: 22 July 2014 - 01:06 PM

#1 Lee360TheCoder  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-March 14

Is there anyway to do this?

Posted 22 July 2014 - 10:40 AM

Hey guys, I'm revamping my website. I wanted to know if this is possible. I want the post to automatically "break a line". Is there anyway for me to do this?

HTML:
<!DOCTYPE html>
<html>
<head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link href='CSS/main.css' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="favicon.ico" />

<title>Lee360TheCoder | Home</title>
</head>

<body>

<!-- Navagtion Bar [Start]-->
<div id="NavBar_Color">
<h1 id="NavTitle">Lee360TheCoder</h1>
<ul id="NavBar">
	<li class="NavLI"><a class="NavItem" href="#">Home</a></li>
	<li class="NavLI"><a class="NavItem" href="#">Downloads</a></li>
	<li class="NavLI"><a class="NavItem" href="#">Projects</a></li>
	<li class="NavLI"><a class="NavItem" href="#">About</a></li>
</ul>
</div>
<!-- Navigation Bar [End]-->

<div id="Ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Unit #1 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:468px;height:60px"
     data-ad-client="ca-pub-6233062203578904"
     data-ad-slot="6512755677"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>



<div id="Blog">
<p class="Blog_Subject"> Revamp of the website.</p>
<p class="Blog_Date">July 21st, 2014.</p>
<p class="Blog_Content">Hello guys, this is a test. <br/> This is the very backbone of the site. It's not done just yet.....................................................................................................................................................................................................................................................................................</p>
</div>
<p id="copyright">Copyright &copy; 2014 Lee360TheCoder. <br/> All rights reserved.</p>
</body>
</html>


CSS:
/* Main Elements */

* {
	margin: 0px;
	padding: 0px;
}

body {
    background-color: red;
}

.separator {
	height: 10px;
	margin-left: auto;
	margin-right: auto;
	background-color: red;
	border-style: none;
}

#copyright {
	font-size: 15px;
	text-align: center;
	font-family: 'Open-Sans', sans-serif;
	font-weight: bold;
	color: white;
}

#Ad {
	margin-left: auto;
	margin-right: auto;
}
/* Navigation bar */

#NavBar {
	list-style: none;
	background-color: red;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 30px;
	padding: 5px;
	width: 520px;
}

#NavBar_Color {
	background-color: red;
	padding: 40px;
}

#NavTitle {
	text-align: center;
	color: white;
	font-family: 'Open Sans', sans-serif;
	font-size: 70px;
	background-color: red;
}

.NavLI {
	display: inline-block;
}

.NavItem {
	text-decoration: none;
	color: #BD0000;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: -5px;
	margin-top: 30px;
	font-size: 30px;
	font-family: 'Open Sans', sans-serif;
	background-color: white;
	transition: all 0.5s ease;
}

.NavItem:hover {
	color: white;
}

.NavItem_Active {
}

/* Home Page */

#Blog {
	background-color: white;
	box-shadow: 4px 4px 15px black;
	border-color: white;
	border-style: solid;
	border-radius: 5px;
	font-family: 'Open Sans', sans-serif;
	margin-left: 50px;
	margin-right: 400px;
	margin-bottom: 20px;
}

.Blog_Subject {
	font-size: 25px;
	margin-left: 8px;
	color: red;
}

.Blog_Date {
	margin-left: 8px;
	color: #2E2E2E;
}

.Blog_Content {
	margin-left: 8px;
}



Result:
http://s23.postimg.o...cr/Untitled.png

Is This A Good Question/Topic? 0
  • +

Replies To: Is there anyway to do this?

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4405
  • View blog
  • Posts: 12,262
  • Joined: 18-April 07

Re: Is there anyway to do this?

Posted 22 July 2014 - 10:53 AM

In CSS3 there is a setting for word-wrap called "break-word" which will break your very long words like that to the next line. Hope this helps! :)
Was This Post Helpful? 1
  • +
  • -

#3 Lee360TheCoder  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-March 14

Re: Is there anyway to do this?

Posted 22 July 2014 - 10:55 AM

View PostMartyr2, on 22 July 2014 - 10:53 AM, said:

In CSS3 there is a setting for word-wrap called "break-word" which will break your very long words like that to the next line. Hope this helps! :)/>

Thank you! It worked. I just want to know if this is considered bad practice, or do you know?
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3741
  • View blog
  • Posts: 13,083
  • Joined: 12-December 12

Re: Is there anyway to do this?

Posted 22 July 2014 - 01:03 PM

It has been added by CSS3 for this purpose. It wasn't possible to do before. Another recent, and similar, property is hyphens, allowing hyphenated words to be broken, but it isn't universally supported.

It is not a bad practice, an acceptable practice would be more accurate.

An alternative is to allow the height to grow but, even then, restricting the length of any individual word would require Javascript, which is perhaps even less desirable (and fiddly to implement).
Was This Post Helpful? 0
  • +
  • -

#5 Lee360TheCoder  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-March 14

Re: Is there anyway to do this?

Posted 22 July 2014 - 01:06 PM

View Postandrewsw, on 22 July 2014 - 01:03 PM, said:

It has been added by CSS3 for this purpose. It wasn't possible to do before. Another recent, and similar, property is hyphens, allowing hyphenated words to be broken, but it isn't universally supported.

It is not a bad practice, an acceptable practice would be more accurate.

An alternative is to allow the height to grow but, even then, restricting the length of any individual word would require Javascript, which is perhaps even less desirable (and fiddly to implement).


Ok, just making sure. Thanks man!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1