Почему я не могу написать класс или стиль класса?

Написал одно и тоже как на видео, но не выводиться.

Проблема с <div> и <style>

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>AnimIn</title>
</head>
<body>
	<div class="content">
	<h1>Anime</h1>
	<p>1ShiQJFWDfewzyhgljtryfkohreufwsikglpkiureyrhxjifkugpilhuoytierwsjohpi;hluetwjoik8lptrfedwtfgyhujiokplggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhht1</p>
	<p>dfdfdfdfdfdffdfdfdfdfdfdffdfdf</p>
</div>


<style type="text/css">

	.content{
		width: 300px;
	}
</style>
</body>
</html>

Посмотрите пожалуйста

html

css

4 ответов

<p>1ShiQJFWDfewzyhgljtryfkohreufwsikglpkiureyrhxjifkugpilhuoytierwsjohpi;hluetwjoik8lptrfedwtfgyhujiokplggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhht1</p>
<p>dfdfdfdfdfdffdfdfdfdfdfdffdfdf</p>

У тебя весь текст идет без пробелов, в уроке с пробелами:

<p>300 тысяч фунтов стерлингов было потрачено британскими учеными на изучение взаимодействия уток с водой. В результате длительного исследования им удалось выяснить, что всем остальным способам провести время в воде утки предпочитают дождь, который заменяет им душ.</p>
<p>Еще одно шокирующее открытие исследователей с Туманного Альбиона наконец объяснило страдающим от избыточного веса, в чем заключается их проблема. В ходе научного эксперимента британским ученым удалось установить, что худые люди, как правило, едят меньше, чем полные.</p>

Если вместо своего текста напишешь текст с пробелами и задашь width: 300px, блок будет ограничен на 300px, примерно так:

<div class="content">
	<h1>Anime</h1>
		<p>300 тысяч фунтов стерлингов было потрачено британскими учеными на изучение взаимодействия уток с водой. В результате длительного исследования им удалось выяснить, что всем остальным способам провести время в воде утки предпочитают дождь, который заменяет им душ.</p>
        <p>Еще одно шокирующее открытие исследователей с Туманного Альбиона наконец объяснило страдающим от избыточного веса, в чем заключается их проблема. В ходе научного эксперимента британским ученым удалось установить, что худые люди, как правило, едят меньше, чем полные.</p>
</div>

<style type="text/css">

		.content {
            background-color: red;
          	width: 300px;
		}

</style>

Если хочешь, чтобы любой текст без пробелов ограничивался в 300px, тебе нужно добавить css свойство: word-wrap: break-word;

Вот так:

	<div class="content">
		<h1>Anime</h1>
		<p>1ShiQJFWDfewzyhgljtryfkohreufwsikglpkiureyrhxjifkugpilhuoytierwsjohpi;hluetwjoik8lptrfedwtfgyhujiokplggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhht1</p>
		<p>dfdfdfdfdfdffdfdfdfdfdfdffdfdf</p>
	</div>

	<style type="text/css">

		.content {
            background-color: red;
          	width: 300px;
            word-wrap: break-word;
		}

	</style>

Вроде нормально, а что не выводится? Можешь ссылку на скриншот прислать, что у тебя в браузере отображается?

попробуй также в приватном режиме браузера открыть, может закешировались данные.

https://pastenow.ru/43ad545f78a95b567a1f5a0d2c97a14c

Вот. Когда я крашу текст, у меня краситься только 300px, но текст за 300px уходит

Спасибо за ответ!