bootstrap class displays span text multiline with each word in one line in IE11 angular app
I have an angular app where i have a span html control which looks like below. It displays properly in chrome, firefox and safari but IE 11 displays its text multiline with each one word in single line.
<span
class="col-12"
attr.aria-label="This text should appear multiline only when it overflows"
></span>
When i look at the dev tools in IE , i see span has two css properties one with flex: 0 100% and max-width: 100%. I removed flex property in dev tools and it worked fine.
But how do i do this in html without impacting other browsers. How do i modify this class "col-12" to fix this for IE.
html css
angular twitter-bootstrap asked Nov 20 '18 at 17:20
krishnakrishna
184
add a comment |
I have an angular app where i have a span html control which looks like below. It displays properly in chrome, firefox and safari but IE 11 displays its text multiline with each one word in single line.
<span
class="col-12"
attr.aria-label="This text should appear multiline only when it overflows"
></span>
When i look at the dev tools in IE , i see span has two css properties one with flex: 0 100% and max-width: 100%. I removed flex property in dev tools and it worked fine.
But how do i do this in html without impacting other browsers. How do i modify this class "col-12" to fix this for IE.
html css
angular twitter-bootstrap asked Nov 20 '18 at 17:20
krishnakrishna
184
add a comment |
I have an angular app where i have a span html control which looks like below. It displays properly in chrome, firefox and safari but IE 11 displays its text multiline with each one word in single line.
<span
class="col-12"
attr.aria-label="This text should appear multiline only when it overflows"
></span>
When i look at the dev tools in IE , i see span has two css properties one with flex: 0 100% and max-width: 100%. I removed flex property in dev tools and it worked fine.
But how do i do this in html without impacting other browsers. How do i modify this class "col-12" to fix this for IE.
html css
angular twitter-bootstrap asked Nov 20 '18 at 17:20
krishnakrishna
184
I have an angular app where i have a span html control which looks like below. It displays properly in chrome, firefox and safari but IE 11 displays its text multiline with each one word in single line.
<span
class="col-12"
attr.aria-label="This text should appear multiline only when it overflows"
></span>
When i look at the dev tools in IE , i see span has two css properties one with flex: 0 100% and max-width: 100%. I removed flex property in dev tools and it worked fine.
But how do i do this in html without impacting other browsers. How do i modify this class "col-12" to fix this for IE.
html css
angular twitter-bootstrap html css
angular twitter-bootstrap asked Nov 20 '18 at 17:20
krishnakrishna
184
asked Nov 20 '18 at 17:20
krishnakrishna
184
asked Nov 20 '18 at 17:20
krishnakrishna
184
asked Nov 20 '18 at 17:20
krishnakrishna
184
asked Nov 20 '18 at 17:20
krishnakrishna
184
184
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398261%2fbootstrap-class-displays-span-text-multiline-with-each-word-in-one-line-in-ie11%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398261%2fbootstrap-class-displays-span-text-multiline-with-each-word-in-one-line-in-ie11%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
