不跟随文本对齐的分词

问题描述 投票：0回答：2

我有一个html，我需要在一个块中显示句子的环绕，但它的位置是向左浮动。result

我想让字符串的其余部分（没有显示出来的片段在其b / c处溢出）在“非常”这个词下面显示。

HTML

<body class='login'><div id="header">
            <div id="branding">
                 <h1 id="site-name"><a href="/">very long string that needs to be better displayed</a></h1>
            </div>
        </div></body>

CSS

#header #branding h1 {
    margin: 0;
    padding: 5px 10px;
    text-indent: 190px;
    background: white url(https://via.placeholder.com/150) 5px 0px no-repeat;
    height: 136px;
    width: 150px;
    background-size: 150px;
    white-space: pre;
}
.login #header h1 a {
    color: black;
    position: relative;
    top: 50px;
}

如果我尝试overflow-wrap:break-word，它将显示为：

result of overflow-wrap

html css
2个回答
1
投票

使用padding-left，因为text-indent仅影响第一行。不要忘记添加box-sizing:border-box;来考虑宽度内的填充：

#header #branding h1 {
    margin: 0;
    padding: 5px 10px 5px 190px;
    background: white url(https://via.placeholder.com/150) 5px 0px no-repeat;
    width: 600px;
    box-sizing:border-box;
    background-size: 150px;
}
.login #header h1 a {
    color: black;
    position: relative;
    top: 50px;
}
<div id="header">
            <div id="branding">
                 <h1 id="site-name"><a href="/">very long string that needs to be better displayed</a></h1>
            </div>
        </div></body>
-4
投票

最简单的解决方案是使用bootstrape的网格系统

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.