Question

我正在创建一个网站，并在其中放置了页面内容的框内。现在我的单词在容器的结尾处折断了一半，因此我使用了white-space: pre;并且单词在结尾处也没有折断，但是我遇到了另一个问题，文本现在无法容纳100％的容器。 / p>

这是网站：https://5rand5.com/education/globetrot.php，文本很好，它占用了其容器的100％，但单词在行尾折断了一半，因此如何使文本像现在这样适合整个容器，但是单词不会在容器末尾中断。

HTML：

<div class="mainbox">
<img class="grow-shadow increase leftimage" src="assets/img/bubbles/firstb.png" align="left">

<p class="maintext textchange"><strong>GLOBETROT WITHH ARABIC</strong> is your online language classroom that
 gives you the opportunity to learn the Arabic
 language through Skype and/or Zoom wherever 
 you are and anytime you wish. Whether you are 
 an adventurer trotting around the globe and exploring 
 its wonders, an entrepreneur seeking flexible learning 
 hours, a fulltime mom/dad, or simply someone who aspires 
 to evolve in the comfort of their home while sipping on 
 warm coffee, this is your chance to finally take on the 
 opportunity of learning the Arabic language with a lot 
 of fun and flexibility and most importantly at your own pace and comfort. 
 You do not need to commit to physical place and space or to a particular time
 to learn the Arabic language and connect with its culture and people. With 
 Globetrot with Arabic, you can make the most of the increasing space-time 
 compression and cross social and cultural borders. All you need is a phone or a 
 computer, a set of earphones, good Wi-Fi and the enthusiasm to learn the Arabic
 language and the beautiful culture that comes with it.  </p>
</div>

CSS：

.mainbox {
    width: 100%;
    margin-top: -133px;
}

.leftimage {
    width: 350px;
    height: auto;
    position: relative;
    top: 98px;
    margin-right: 152px;
    margin-bottom: 59px !important;
    left: 8.8em;
}

.increase {
    display: block;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.textchange {
    margin-bottom: -11em;
}

.maintext {
    word-break: break-all;
    font-size: 41px;
    padding: 186px;
}

任何帮助都将真正意义重大！

Answer 1

此问题是由您使用word-break引起的。 break-all会在文本中的任何字符处断开以防止溢出。

尝试使用break-word来帮助打破单词时保留单词。但是，由于每个单词的长度都不相同，因此可能不会100％填充容器。

<!DOCTYPE html>
<html>
<head>
<style>
p {
  width: 140px; 
  border: 1px solid #000000;
}

p.a {
  word-break: normal;
}

p.b {
  word-break: keep-all;
}

p.c {
  word-break: break-all;
}

p.d {
  word-break: break-word;
}
</style>
</head>
<body>

<h1>The word-break Property</h1>

<h2>word-break: normal (default):</h2>
<p class="a">Thisissomeveryveryverylong word. Words will break according to usual rules.</p>

<h2>word-break: keep-all:</h2>
<p class="b">Thisissomeveryveryverylong word. This text will-break-at-hyphens.</p>

<h2>word-break: break-all:</h2>
<p class="c">Thisissomeveryveryverylong word. This text will break at any character.</p>

<h2>word-break: break-word:</h2>
<p class="d">Thisissomeveryveryverylong word. This text will break at any word.</p>

</body>
</html>

Answer 2

确保文本行是宽度的100％的一种方法是使用带字间的text-justify属性。这样会将单词之间的空格扩展到100％，并且不会破坏单词：

.mainbox {
    width: 100%;
    margin-top: -133px;
}

.leftimage {
    width: 350px;
    height: auto;
    position: relative;
    top: 98px;
    margin-right: 152px;
    margin-bottom: 59px !important;
    left: 8.8em;
}

.increase {
    display: block;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

.textchange {
    margin-bottom: -11em;
}

.maintext {
  text-align: justify;
  text-justify: inter-word;

    font-size: 41px;
    padding: 100px;
}

<div class="mainbox">
<img class="grow-shadow increase leftimage" src="assets/img/bubbles/firstb.png" align="left">

<p class="maintext textchange"><strong>GLOBETROT WITHH ARABIC</strong> is your online language classroom that
 gives you the opportunity to learn the Arabic
 language through Skype and/or Zoom wherever 
 you are and anytime you wish. Whether you are 
 an adventurer trotting around the globe and exploring 
 its wonders, an entrepreneur seeking flexible learning 
 hours, a fulltime mom/dad, or simply someone who aspires 
 to evolve in the comfort of their home while sipping on 
 warm coffee, this is your chance to finally take on the 
 opportunity of learning the Arabic language with a lot 
 of fun and flexibility and most importantly at your own pace and comfort. 
 You do not need to commit to physical place and space or to a particular time
 to learn the Arabic language and connect with its culture and people. With 
 Globetrot with Arabic, you can make the most of the increasing space-time 
 compression and cross social and cultural borders. All you need is a phone or a 
 computer, a set of earphones, good Wi-Fi and the enthusiasm to learn the Arabic
 language and the beautiful culture that comes with it.  </p>
</div>

Answer 3

尝试word-wrap: break-word道具，希望对您有所帮助。谢谢

div {
  border: 1px solid #ccc;
  width: 250px;
  word-wrap: break-word;
}

<div>DummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyTextDummyText</div>

如何使我的文字完全适合我的容器？

3 个答案: