英文:
Unable to create Equal Gaps between text and div's border
问题
-
我有2个div，一个内部div和一个包装div。
-
我希望内部div始终居中于包装div中。
-
我希望在文本和内部div的边框之间始终保留15像素的间隙/空白，位于左侧和右侧。
请查看我制作的这个图像，以说明问题：
正如您所看到的，它显示了3种情况：
-
这是正常的，左右两侧都有15像素的间隙。
-
这是我希望解决的问题，当文本包含长单词并且我调整视图的宽度（浏览器的宽度）时，右侧会出现大量不需要的间隙，位于文本和div的边框之间。
-
这是我想要实现的效果。
这是我的fiddle代码：
<div class="wrapper">
<div class="divForText">
Text... Text... Text... Text... Text... Text... LongWordToTestGapProblem Text... Text...
</div>
</div>
-
我希望仅使用纯HTML和CSS，不使用JavaScript。
-
我不想在单词中间断开。
-
请在我提供的fiddle链接中尝试您的解决方案，不会超过20-30秒。
谢谢！
英文:
I'm having 2 divs, inner div and a wrapper div.
1. I want that the inner div will always be centered inside the wrapper div.
2. I want to always have a Gap/Space of 15 pixels between the text and the inner div's border, on the left side and on the right side.
Please check this image that I made that illustrate the problem:
https://i.ibb.co/Df2gxmF/Divs-Image.jpg
As you can see it shows 3 situations:
1. This is OK, I'm getting 15 pixels gaps on left and right.
2. This is the problem that I'll like to solve, when the text contains a long word and I play around with the width of the view (the width of the browser) then I'm getting large unwanted gap on the right side, between the text and the div's border.
3. This is what I want to accomplish.
Here is my code in the fiddle:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.wrapper {
border: 1px solid black;
text-align: center;
padding: 25px;
margin: auto;
width: 50%;
}
.divForText {
background-color: #EEEEEE;
border: 1px solid blue;
display: inline-block;
text-align: left;
padding: 15px;
margin: auto;
}
<!-- language: lang-html -->
<div class="wrapper">
<div class="divForText">
Text... Text... Text... Text... Text... Text... LongWordToTestGapProblem Text... Text...
</div>
</div>
<!-- end snippet -->
-
I want to use pure Html and CSS only, without JavaScript.
-
I don't want to break words in the middle.
-
Please, if you think that you have a solution try to test it first in the fiddle link that I gave, it takes not more than 20-30 seconds.
Thanks!
答案1
得分: 1
丹尼尔，你现在要求的是不可能的。默认情况下，文本会获得足够的空间，以避免分隔单词，因此你的 "right gap"。如果你希望实现一种美观的方式，你可以通过将以下代码添加到你的 .divForText 中来强制分隔单词（我知道，你说这不是你想要的）：
overflow-wrap: break-word;
word-break: break-all;
另外，我强烈建议始终将文本包装在任何用于此目的的HTML5标签中，例如 <p> 或任何 <h1>、<h2>、<h3> 等等。
英文:
Daniel, what you are asking for is currently not possible. By default the text is given sufficient space in order for it to not break word, therefore your "right gap". If you wish to accomplish an aesthetic approach you could break-word (i know i know.. you said it's not what you want) by adding
overflow-wrap: break-word;
word-break: break-all;
to your .divForText.
Also, I would strongly suggest always wrapping your text in any HTML5 tag used for that purpose. Such as <p> or any <h1>, <h2>, <h3>, etc
答案2
得分: 0
只需在CSS中将"text-align:left"替换为"center"，如下所示：
.divForText {
text-align: center;
}
英文:
just need to replace text-align:left with center in css as follows
.divForText{
text-align: center;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论